- ベストアンサー
remove()で削除要素の再作成ができない
- 要素を.remove();で削除しても、再度作成できない場合があります。
- 削除した要素を再作成しようとするとエラーが発生することがあります。
- ネイティブJSの仕様上、一度削除した要素は再作成できない場合があります。
- okweb12345
- お礼率64% (227/350)
- JavaScript
- 回答数7
- ありがとう数5
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
>回答No.6 amanojaku1 >プログラムが どうなっているのか分かりませんが、「delBtnがないというエラー」が出ると言う事は そう言う可能性が考えられます。 >delBtn.addEventListener('click', function() { >の部分 ↑ここをローカルストレージに何も入っていない場合に どのように処理したいのか？、と言う事が問題です。 例えばローカルストレージに何も入っていない場合にはデフォルト値(デフォルトの要素)を代入してやるとかが考えられます。
その他の回答 (6)
- amanojaku1
- ベストアンサー率54% (265/488)
>delBtn.addEventListener('click', function() { >の部分にローカルストレージに何も入っていない状況ですと、 >delBtnがないというエラーが出てしまいます。 >DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。 >という事ですが、delボタンが出来る前にdomを一度読み込むので、この時点で一度実行されている故にエラーが出ていると考えてよいでしょうか？ プログラムが どうなっているのか分かりませんが、「delBtnがないというエラー」が出ると言う事は そう言う可能性が考えられます。
- amanojaku1
- ベストアンサー率54% (265/488)
「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>
- amanojaku1
- ベストアンサー率54% (265/488)
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>
お礼
if(''==document.getElementById('hoge') こんな書き方もできるのですね。hogeが空だったら真という事ですね。 確かにこれはできるのですが、本題の方が解決しませんのでお願いします。
補足
delBtn.addEventListener('click', function() { の部分にローカルストレージに何も入っていない状況ですと、 delBtnがないというエラーが出てしまいます。 DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。 という事ですが、delボタンが出来る前にdomを一度読み込むので、この時点で一度実行されている故にエラーが出ていると考えてよいでしょうか？ また、ページ読み込み時にしか実行されないので、その後削除ボタンを作って削除をしても子の中身は実行されないので、再度削除ができないのではないでしょうか？
- amanojaku1
- ベストアンサー率54% (265/488)
とりあえず「remove()」を「innerHTML = ''」に変更してみて下さい。
お礼
インスペクタで確認しながら行ったところ一度目は中身をカラにできたのですが二度目は削除ボタンを押しても空にするソースの入った要素の出現時に実行の中身をスルーしています 二度目は要素が出現していないからでしょうか
補足
さく所をせずに要素を残して、中身だけ空にするのですね。 一度目はうまく行ったのでしが二度目カラテキストエリアに文字を入れても何も表記されません
- ballville
- ベストアンサー率47% (233/487)
外しているかもしれませんが、 createした要素をちゃんと親要素にappendしていますか？ あと、気になったことは、要素をremoveして作り直してappendするのではなく、当該elementのstyle.dissplay属性を'none'にして、一時的に見えなくする方法は採れませんか。可能であれば、そちらのほうが処理が軽くなると思います。 ※要素の削除→再作成だと、イベントリスナーの再登録も必要になります。念の為。
お礼
一度目も二度目も作って表記する処理は同じコードが担当しているので、もしappendできていないのであれば一度目もできないはずなのでそれはないと思います。 ありがとうございます。 一度目も二度目も、同じソースで要素作成DOMツリーへの追加を行っています。 しかしインスペクタで見ると一度削除して二度目の作成を行った際に、 なぜか追加処理が流されているような挙動をします。 これが原因なのかなと思うのですが、なぜ一度削除するとスルーするのかがわかりません。 事前にhtml側で要素を10個くらいつく
補足
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)
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";
お礼
ありがとうございます。 下記にソースを張り付けました。 一度目も二度目も、同じソースで要素作成DOMツリーへの追加を行っています。 しかしインスペクタで見ると一度削除して二度目の作成を行った際に、 なぜか追加処理が流されているような挙動をします。 これが原因なのかなと思うのですが、なぜ一度削除するとスルーするのかがわかりません。
お礼
ソースコードを外部に記載してはいけないようなので残念ですが他の所で質問します。