Javascript 无法在节点上执行 removeChild
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42956884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Failed to execute removeChild on Node
提问by HerrimanCoder
Other stack answers such as thisand thisseem to be specialized cases and I believe my case is more generalized. I am doing this in my js:
诸如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);
Everything works correctly and as expected (the div is correctly appended and I can see it) until removeChild()is called, at which time I get the error Failed to execute 'removeChild' on 'Node'.
一切正常并按预期工作（div 正确附加并且我可以看到它）直到removeChild()被调用，此时我收到错误Failed to execute 'removeChild' on 'Node'。
What am I doing wrong?
我究竟做错了什么？
采纳答案by T.J. Crowder
Your myCoolDivelement isn't a child of the player container. It's a child of the divyou created as a wrapper for it (markerDivin the first part of the code). Which is why it fails, removeChildonly removes children, not descendants.
您的myCoolDiv元素不是播放器容器的子元素。它是div您为它创建的包装器的子项（markerDiv在代码的第一部分）。这就是它失败的原因，removeChild只删除孩子，而不是后代。
You'd want to remove that wrapper div, or not add it at all.
您想删除该包装器 div，或者根本不添加它。
Here's the "not adding it at all" option:
这是“根本不添加”选项：
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>Or without using the wrapper (although it's quite handy for parsing that HTML):
或者不使用包装器（尽管解析 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>回答by Anish Goyal
The direct parent of your child is markerDiv, so you should call remove from markerDiv as so:
你孩子的直接父级是markerDiv，所以你应该像这样从markerDiv中调用remove：
markerDiv.removeChild(myCoolDiv);
Alternatively, you may want to remove markerNode. Since that node was appended directly to videoContainer, it can be removed with:
或者，您可能想要删除markerNode。由于该节点直接附加到 videoContainer，因此可以通过以下方式将其删除：
document.getElementById("playerContainer").removeChild(markerDiv);
Now, the easiest general way to remove a node, if you are absolutely confident that you did insert it into the DOM, is this:
现在，删除一个节点的最简单的通用方法，如果你绝对有信心将它插入到 DOM 中，是这样的：
markerDiv.parentNode.removeChild(markerDiv);
This works for any node (just replace markerDiv with a different node), and finds the parent of the node directly in order to call remove from it. If you are unsure if you added it, double check if the parentNode is non-null before calling removeChild.
这适用于任何节点（只需用不同的节点替换markerDiv），并直接找到节点的父节点以便从中调用remove。如果您不确定是否添加了它，请在调用 removeChild 之前仔细检查 parentNode 是否为非空。
回答by dlchang
For me, a hint to wrap the troubled element in another HTML tag helped. However I also needed to add a key to that HTML tag. For example:
对我来说，将有问题的元素包装在另一个 HTML 标签中的提示很有帮助。但是，我还需要为该 HTML 标记添加一个键。例如：
// Didn't work
<div>
<TroubledComponent/>
</div>
// Worked
<div key='uniqueKey'>
<TroubledComponent/>
</div>
回答by xort
As others have mentioned, myCoolDivis a child of markerDivnot playerContainer. If you want to remove myCoolDivbut keep markerDivfor some reason you can do the following
正如其他人所提到的，myCoolDiv是markerDivnot的孩子playerContainer。如果您想删除myCoolDiv但markerDiv出于某种原因保留，您可以执行以下操作
myCoolDiv.parentNode.removeChild(myCoolDiv);
