javascript - 无法在节点上执行 removeChild

Question

其他堆栈答案，例如 this和 this似乎是特殊情况，我相信我的情况更为普遍。我在我的 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 '在'节点'上。

我做错了什么？

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>