ノード

Question

のremoveChildの実行に失敗しました。thisやthisなどのスタックの回答が特殊なケースのようです。私のケースはより一般化されていると思います。

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'を取得し、私は私のJSでこれをやっています。

私は間違っていますか？

Answer 1

myCoolDiv要素はプレーヤーコンテナの子ではありません。それはdivの子であり、コードのラッパーとして作成されています（コードの最初の部分にはmarkerDiv）。これが失敗する理由は、removeChildは子孫ではなく子孫のみを削除します。

ラッパーdivを削除するか、まったく追加しないでください。

ここで "全くそれを追加しない" オプションです：

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>

は、

Answer 2

あなたの子供の直接の親はmarkerDivあるので、あなたはそのようmarkerDivから削除呼び出す必要があります：

markerDiv.removeChild(myCoolDiv); 

また、あなたがmarkerNodeを削除することがあります。そのノードがvideoContainerに直接追加されたので、それを用いて除去することができます：あなたがDOMに挿入しなかったことを絶対的に確信している場合は、ノードを削除するには今すぐ

document.getElementById("playerContainer").removeChild(markerDiv); 

、最も簡単な一般的な方法は、これは次のとおりです。

markerDiv.parentNode.removeChild(markerDiv); 

これは、任意のノードで動作します（ちょうど別のノードでmarkerDivを置き換える）、およびそれから取り除く呼び出すために直接ノードの親を見つけました。追加したかどうか不明な場合は、removeChildを呼び出す前にparentNodeがnullでないかどうかを再確認してください。

Answer 3

他にも言及したように、myCoolDivはmarkerDivの子ではなく、playerContainerです。あなたがmyCoolDivを削除するが、何らかの理由でmarkerDivを維持したい場合は、

myCoolDiv.parentNode.removeChild(myCoolDiv); 

JSFiddle