ベストアンサー

※ ChatGPTを利用し、要約された質問です（原文：remove();で削除要素の再作成ができない）

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

2017/08/12 13:12

このQ&Aのポイント

要素を.remove();で削除しても、再度作成できない場合があります。
削除した要素を再作成しようとするとエラーが発生することがあります。
ネイティブJSの仕様上、一度削除した要素は再作成できない場合があります。

okweb12345
お礼率64% (227/350)

JavaScript
回答数7
ありがとう数5

みんなの回答 （7）
専門家の回答

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

ベストアンサー

amanojaku1
ベストアンサー率54% (265/488)

2017/08/13 20:28 回答No.7

>回答No.6　amanojaku1 >プログラムがどうなっているのか分かりませんが、「delBtnがないというエラー」が出ると言う事はそう言う可能性が考えられます。 >delBtn.addEventListener('click', function() { >の部分 ↑ここをローカルストレージに何も入っていない場合にどのように処理したいのか？、と言う事が問題です。例えばローカルストレージに何も入っていない場合にはデフォルト値(デフォルトの要素)を代入してやるとかが考えられます。

質問者

お礼 2017/08/15 16:38

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

その他の回答 (6)

amanojaku1
ベストアンサー率54% (265/488)

2017/08/13 20:19 回答No.6

>delBtn.addEventListener('click', function() { >の部分にローカルストレージに何も入っていない状況ですと、 >delBtnがないというエラーが出てしまいます。 >DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。 >という事ですが、delボタンが出来る前にdomを一度読み込むので、この時点で一度実行されている故にエラーが出ていると考えてよいでしょうか？プログラムがどうなっているのか分かりませんが、「delBtnがないというエラー」が出ると言う事はそう言う可能性が考えられます。

amanojaku1
ベストアンサー率54% (265/488)

2017/08/13 10:23 回答No.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">  </script> </body> </html>

amanojaku1
ベストアンサー率54% (265/488)

2017/08/13 02:15 回答No.4

HTMLタグだと正常に書き込めない場合があるようです(^_^;) そちらのソースとは関係ありませんが、下記は「innerHTML」のテスト用のソースです。「Chrome」にて何度も「表示／消去」が正常に動作します。まず、(いきなり難しいソースにしないで)簡単なソースでチェックしてみたらどうでしょうか？ <html> <head> </head> <body> <input id="btn" type="button" value="表示／消去"> <p id="hoge">hoge</p> <script type="text/javascript">  </script> </body> </html>

質問者

お礼 2017/08/13 08:39

if(''==document.getElementById('hoge') こんな書き方もできるのですね。hogeが空だったら真という事ですね。確かにこれはできるのですが、本題の方が解決しませんのでお願いします。

質問者

補足 2017/08/13 15:50

delBtn.addEventListener('click', function() { の部分にローカルストレージに何も入っていない状況ですと、 delBtnがないというエラーが出てしまいます。 DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。という事ですが、delボタンが出来る前にdomを一度読み込むので、この時点で一度実行されている故にエラーが出ていると考えてよいでしょうか？また、ページ読み込み時にしか実行されないので、その後削除ボタンを作って削除をしても子の中身は実行されないので、再度削除ができないのではないでしょうか？

amanojaku1
ベストアンサー率54% (265/488)

2017/08/12 20:15 回答No.3

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

質問者

お礼 2017/08/12 21:25

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

質問者

補足 2017/08/12 21:06

さく所をせずに要素を残して、中身だけ空にするのですね。一度目はうまく行ったのでしが二度目カラテキストエリアに文字を入れても何も表記されません

ballville
ベストアンサー率47% (233/487)

2017/08/12 15:48 回答No.2

外しているかもしれませんが、 createした要素をちゃんと親要素にappendしていますか？あと、気になったことは、要素をremoveして作り直してappendするのではなく、当該elementのstyle.dissplay属性を'none'にして、一時的に見えなくする方法は採れませんか。可能であれば、そちらのほうが処理が軽くなると思います。 ※要素の削除→再作成だと、イベントリスナーの再登録も必要になります。念の為。

質問者

お礼 2017/08/12 18:34

一度目も二度目も作って表記する処理は同じコードが担当しているので、もしappendできていないのであれば一度目もできないはずなのでそれはないと思います。ありがとうございます。一度目も二度目も、同じソースで要素作成DOMツリーへの追加を行っています。しかしインスペクタで見ると一度削除して二度目の作成を行った際に、なぜか追加処理が流されているような挙動をします。これが原因なのかなと思うのですが、なぜ一度削除するとスルーするのかがわかりません。事前にhtml側で要素を10個くらいつく

質問者

補足 2017/08/13 13:13

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がすべて読み込み終わった時に実行されるようですが、すると一度しか実行ができないのではないでしょうか？次の削除ボタンクリックの際はこれで囲まれているから中身が実行できないのではないのでしょうか？

amanojaku1
ベストアンサー率54% (265/488)

2017/08/12 15:42 回答No.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 18:34

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