BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] NodeのremoveChildの実行に失敗しました。

2022-02-16 23:29:02

質問

その他、以下のようなスタックアンサーがあります。 これ と これ は特殊なケースのようで、私のケースはより一般的なものだと思います。私のjsではこのようなことを行っています。 

var markerDiv = document.createElement("div");
markerDiv.innerHTML = "<div id='MyCoolDiv' style='color: #2b0808'>123</div>";
document.getElementById("playerContainer").appendChild(markerDiv);

// after a brief delay, REMOVE the appended child
setTimeout(function(){ 
    var myCoolDiv = document.getElementById("MyCoolDiv");
    document.getElementById("playerContainer").removeChild(myCoolDiv);
}, 1500);

すべて正しく、期待通りに動作します（divは正しく追加され、見ることができます）。 removeChild() が呼び出されると、エラーが発生します。 Failed to execute 'removeChild' on 'Node' .

何が間違っているのでしょうか？

どうすればいいですか？

あなたの myCoolDiv 要素は、プレーヤー コンテナの子ではありません。の子です。 div そのラッパーとして作成された ( markerDiv を実行します)。それが失敗の理由です。 removeChild は子だけを削除し、子孫は削除しません。

ラッパーのdivを削除するか、まったく追加しないようにしたいものです。

ここでは、quot;全く追加しない"という選択肢を紹介します。 

var markerDiv = document.createElement("div");
markerDiv.innerHTML = "<div id='MyCoolDiv' style='color: #2b0808'>123</div>";
document.getElementById("playerContainer").appendChild(markerDiv.firstChild);
// -------------------------------------------------------------^^^^^^^^^^^

setTimeout(function(){ 
    var myCoolDiv = document.getElementById("MyCoolDiv");
    document.getElementById("playerContainer").removeChild(myCoolDiv);
}, 1500);

<div id="playerContainer"></div>

あるいは、ラッパーを使わずに（そのHTMLをパースするのにはかなり便利ですが）。 

var myCoolDiv = document.createElement("div");
// Don't reall need this: myCoolDiv.id = "MyCoolDiv";
myCoolDiv.style.color = "#2b0808";
myCoolDiv.appendChild(
  document.createTextNode("123")
);
document.getElementById("playerContainer").appendChild(myCoolDiv);

setTimeout(function(){ 
    // No need for this, we already have it from the above:
    // var myCoolDiv = document.getElementById("MyCoolDiv");
    document.getElementById("playerContainer").removeChild(myCoolDiv);
}, 1500);

<div id="playerContainer"></div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します