无法在节点上执行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' on 'Node'.

我究竟做错了什么？

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

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

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

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

Answer 3

当我将其更改为 normal 、 div 时，我用 <> </> 作为父级将其包裹起来，效果很好

Answer 4

你孩子的直接父级是markerDiv，所以你应该像这样从markerDiv中调用remove：

markerDiv.removeChild(myCoolDiv);

或者，您可能想要删除markerNode。由于该节点直接附加到 videoContainer，因此可以通过以下方式将其删除：

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

现在，删除一个节点的最简单的通用方法，如果你绝对有信心将它插入到 DOM 中，是这样的：

markerDiv.parentNode.removeChild(markerDiv);

这适用于任何节点（只需用不同的节点替换markerDiv），并直接找到节点的父节点以便从中调用remove。如果您不确定是否添加了它，请在调用 removeChild 之前仔细检查 parentNode 是否为非空。