无法在节点上执行 removeChild

Question

诸如此类 的 其他堆栈 答案 似乎是特殊情况，我相信我的情况更为普遍。我在我的 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' 。

我究竟做错了什么？

原文由 HerrimanCoder 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对我来说，将有问题的元素包装在另一个 HTML 标记中的提示很有帮助。但是，我还需要向该 HTML 标记添加一个键。例如：

 // Didn't work
<div>
     <TroubledComponent/>
</div>

// Worked
<div key='uniqueKey'>
     <TroubledComponent/>
</div>

原文由 dlchang 发布，翻译遵循 CC BY-SA 4.0 许可协议