-PR-
解決済み

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

  • 困ってます
  • 質問No.9362169
  • 閲覧数85
  • ありがとう数5
  • 気になる数0
  • 回答数7
  • コメント数0

お礼率 65% (193/294)

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

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

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

https://okwave.jp/qa/q9361862.html
の続き
通報する
  • 回答数7
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.7
レベル12

ベストアンサー率 59% (172/289)

JavaScript カテゴリマスター
>回答No.6 amanojaku1

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

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

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

お礼率 65% (193/294)

ソースコードを外部に記載してはいけないようなので残念ですが他の所で質問します。
投稿日時 - 2017-08-15 16:38:46

その他の回答 (全6件)

  • 回答No.1
レベル12

ベストアンサー率 59% (172/289)

JavaScript カテゴリマスター
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";
補足コメント
okweb12345

お礼率 65% (193/294)

 
投稿日時 - 2017-08-14 13:18:45
お礼コメント
okweb12345

お礼率 65% (193/294)

ありがとうございます。

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

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


  • 回答No.2
レベル11

ベストアンサー率 44% (170/386)

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

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

お礼率 65% (193/294)

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
お礼コメント
okweb12345

お礼率 65% (193/294)

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




ありがとうございます。


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

事前にhtml側で要素を10個くらいつく
投稿日時 - 2017-08-12 18:34:32
  • 回答No.4
レベル12

ベストアンサー率 59% (172/289)

JavaScript カテゴリマスター
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>
補足コメント
okweb12345

お礼率 65% (193/294)

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

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

また、ページ読み込み時にしか実行されないので、その後削除ボタンを作って削除をしても子の中身は実行されないので、再度削除ができないのではないでしょうか?
投稿日時 - 2017-08-13 15:50:58
お礼コメント
okweb12345

お礼率 65% (193/294)

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

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

確かにこれはできるのですが、本題の方が解決しませんのでお願いします。
投稿日時 - 2017-08-13 08:39:13
  • 回答No.5
レベル12

ベストアンサー率 59% (172/289)

JavaScript カテゴリマスター
「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>
  • 回答No.6
レベル12

ベストアンサー率 59% (172/289)

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

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

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

ベストアンサー率 59% (172/289)

JavaScript カテゴリマスター
とりあえず「remove()」を「innerHTML = ''」に変更してみて下さい。
補足コメント
okweb12345

お礼率 65% (193/294)

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

一度目はうまく行ったのでしが二度目カラテキストエリアに文字を入れても何も表記されません
投稿日時 - 2017-08-12 21:06:23
お礼コメント
okweb12345

お礼率 65% (193/294)

インスペクタで確認しながら行ったところ一度目は中身をカラにできたのですが二度目は削除ボタンを押しても空にするソースの入った要素の出現時に実行の中身をスルーしています
二度目は要素が出現していないからでしょうか
投稿日時 - 2017-08-12 21:25:26
このQ&Aで解決しましたか?
関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-

特集


開業・独立という夢を持つ人へ向けた情報満載!

ピックアップ

ページ先頭へ