こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

remove();で削除要素の再作成ができない

ボタンを押したときに、.createElement()で作った要素を.remove();で削除して、その後またボタンを押した際にまた作るという形の物を作りたいです。

しかし一度目には要素もできて、削除もできるものの、
二度目のクリックの際要素が作成されません。
jsをインスペクタで見ると、要素は作成されている様に出ているのですが、
その要素にinnerHTMLで入れるテキストの部分にそんな要素はないという旨のエラーがでます。

そしてhtmlをインスペクタで見ると確かにその要素ができていません。
もしかして仕様上一度削除した要素はもう一度作れないのでしょうか?
ネイティブjsを使っています。

https://okwave.jp/qa/q9361862.html
の続き

投稿日時 - 2017-08-12 13:12:15

QNo.9362169

困ってます

質問者が選んだベストアンサー

>回答No.6 amanojaku1

>プログラムが どうなっているのか分かりませんが、「delBtnがないというエラー」が出ると言う事は そう言う可能性が考えられます。

>delBtn.addEventListener('click', function() {
>の部分

↑ここをローカルストレージに何も入っていない場合に どのように処理したいのか?、と言う事が問題です。
例えばローカルストレージに何も入っていない場合にはデフォルト値(デフォルトの要素)を代入してやるとかが考えられます。

投稿日時 - 2017-08-13 20:28:08

お礼

ソースコードを外部に記載してはいけないようなので残念ですが他の所で質問します。

投稿日時 - 2017-08-15 16:38:46

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(7)

ANo.6

>delBtn.addEventListener('click', function() {
>の部分にローカルストレージに何も入っていない状況ですと、
>delBtnがないというエラーが出てしまいます。

>DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。
>という事ですが、delボタンが出来る前にdomを一度読み込むので、この時点で一度実行されている故にエラーが出ていると考えてよいでしょうか?

プログラムが どうなっているのか分かりませんが、「delBtnがないというエラー」が出ると言う事は そう言う可能性が考えられます。

投稿日時 - 2017-08-13 20:19:08

ANo.5

「style.display」で要素を表示したり消したりする方法もあります。

その要素がインライン要素かブロック要素かによって表示方法が違うので、その要素がインライン要素か、ブロック要素か分かっている必要があります。
「none」で要素を消す:document.getElementById("hoge").style.display="none";
インライン要素の場合は「inline」で表示する:document.getElementById("hoge").style.display="inline";
ブロック要素の場合は「style.display」:「block」で表示する:document.getElementById("hoge").style.display="block";


<html>
<head>
</head>
<body>

<input id="btn" type="button" value="表示/消去"><br>
<div id="hoge">hoge</div>
「div」タグはブロック要素です。<br>

<script type="text/javascript">
<!--
document.write("document.getElementById('hoge').style.displayの初期値は「");
document.write(document.getElementById('hoge').style.display);
document.write("」です。<br>");
document.getElementById('btn').addEventListener('click', function() {
if("none"==document.getElementById('hoge').style.display){ document.getElementById('hoge').style.display="block" }else{ document.getElementById('hoge').style.display="none"; }
}, false);
// -->
</script>

</body>
</html>

投稿日時 - 2017-08-13 10:23:25

ANo.4

HTMLタグだと正常に書き込めない場合があるようです(^_^;)

そちらのソースとは関係ありませんが、下記は「innerHTML」のテスト用のソースです。
「Chrome」にて何度も「表示/消去」が正常に動作します。
まず、(いきなり難しいソースにしないで)簡単なソースでチェックしてみたらどうでしょうか?


<html>
<head>
</head>
<body>

<input id="btn" type="button" value="表示/消去">
<p id="hoge">hoge</p>

<script type="text/javascript">
<!--
document.getElementById('btn').addEventListener('click', function() {
if(''==document.getElementById('hoge').innerHTML){ document.getElementById('hoge').innerHTML = 'piyo'; }else{ document.getElementById('hoge').innerHTML = ''; }
}, false);
// -->
</script>

</body>
</html>

投稿日時 - 2017-08-13 02:15:44

補足

delBtn.addEventListener('click', function() {
の部分にローカルストレージに何も入っていない状況ですと、
delBtnがないというエラーが出てしまいます。

DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。
という事ですが、delボタンが出来る前にdomを一度読み込むので、この時点で一度実行されている故にエラーが出ていると考えてよいでしょうか?

また、ページ読み込み時にしか実行されないので、その後削除ボタンを作って削除をしても子の中身は実行されないので、再度削除ができないのではないでしょうか?

投稿日時 - 2017-08-13 15:50:58

お礼

if(''==document.getElementById('hoge')

こんな書き方もできるのですね。hogeが空だったら真という事ですね。

確かにこれはできるのですが、本題の方が解決しませんのでお願いします。

投稿日時 - 2017-08-13 08:39:13

ANo.3

とりあえず「remove()」を「innerHTML = ''」に変更してみて下さい。

投稿日時 - 2017-08-12 20:15:58

補足

さく所をせずに要素を残して、中身だけ空にするのですね。

一度目はうまく行ったのでしが二度目カラテキストエリアに文字を入れても何も表記されません

投稿日時 - 2017-08-12 21:06:23

お礼

インスペクタで確認しながら行ったところ一度目は中身をカラにできたのですが二度目は削除ボタンを押しても空にするソースの入った要素の出現時に実行の中身をスルーしています
二度目は要素が出現していないからでしょうか

投稿日時 - 2017-08-12 21:25:26

ANo.2

外しているかもしれませんが、
createした要素をちゃんと親要素にappendしていますか?
あと、気になったことは、要素をremoveして作り直してappendするのではなく、当該elementのstyle.dissplay属性を'none'にして、一時的に見えなくする方法は採れませんか。可能であれば、そちらのほうが処理が軽くなると思います。

※要素の削除→再作成だと、イベントリスナーの再登録も必要になります。念の為。

投稿日時 - 2017-08-12 15:48:24

補足

document.addEventListener('DOMContentLoaded', function(){
var delBtn = document.getElementById('memoDelBtn');

delBtn.addEventListener('click', function() {
document.getElementsByClassName('createResult')[0].innerHTML = '';
// document.getElementsByClassName('createResult')[0].remove();
});
});


DOMContentLoaded'はDOMがすべて読み込み終わった時に実行されるようですが、すると一度しか実行ができないのではないでしょうか?

次の削除ボタンクリックの際はこれで囲まれているから中身が実行できないのではないのでしょうか?

投稿日時 - 2017-08-13 13:13:12

お礼

一度目も二度目も作って表記する処理は同じコードが担当しているので、もしappendできていないのであれば一度目もできないはずなのでそれはないと思います。




ありがとうございます。


一度目も二度目も、同じソースで要素作成DOMツリーへの追加を行っています。
しかしインスペクタで見ると一度削除して二度目の作成を行った際に、
なぜか追加処理が流されているような挙動をします。
これが原因なのかなと思うのですが、なぜ一度削除するとスルーするのかがわかりません。

事前にhtml側で要素を10個くらいつく

投稿日時 - 2017-08-12 18:34:32

ANo.1

JavaScriptは なんでもかんでも完璧に動作する訳ではありません(それがJavaScript側のバグか どうかは分かりませんが…)。

「style.display」で要素を表示したり消したりする方が安定して使えます。
その要素がインライン要素かブロック要素かによって表示方法が違うので、その要素がインライン要素か、ブロック要素か知っている必要があります。

「style.display」:「none」で要素を消す。
document.getElementById("hoge").style.display="none";

インライン要素の場合は「style.display」:「inline」で表示する。
document.getElementById("hoge").style.display="inline";

ブロック要素の場合は「style.display」:「block」で表示する。
document.getElementById("hoge").style.display="block";

投稿日時 - 2017-08-12 15:42:24

補足

 

投稿日時 - 2017-08-14 13:18:45

お礼

ありがとうございます。

下記にソースを張り付けました。

一度目も二度目も、同じソースで要素作成DOMツリーへの追加を行っています。
しかしインスペクタで見ると一度削除して二度目の作成を行った際に、
なぜか追加処理が流されているような挙動をします。
これが原因なのかなと思うのですが、なぜ一度削除するとスルーするのかがわかりません。

投稿日時 - 2017-08-12 18:34:01