Javascript 无法在节点上执行removeChild

其他堆栈答案，如和，似乎是专门的案例，我相信我的案例更一般化。我在我的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);

var-markerDiv=document.createElement（“div”）；
markerDiv.innerHTML=“123”；
document.getElementById（“playerContainer”）.appendChild（markerDiv）；
//短暂延迟后，删除附加的子项
setTimeout（函数（）{
var mycoldiv=document.getElementById（“mycoldiv”）；
document.getElementById（“playerContainer”）.removeChild（myColdIV）；
}, 1500);

在调用

removeChild（）

之前，一切都正常工作（div被正确附加，我可以看到它），此时我收到错误

无法在“节点”上执行“removeChild”

---

我做错了什么？

您的

mycoldiv

元素不是播放器容器的子元素。它是作为包装器创建的

div

的子项（

markerDiv

，在代码的第一部分）。这就是它失败的原因，

removeChild

只删除子对象，而不删除子对象

您可能希望删除该包装器div，或者根本不添加它

下面是“根本不添加”选项：

var-markerDiv=document.createElement（“div”）；
markerDiv.innerHTML=“123”；
document.getElementById（“playerContainer”）.appendChild（markerDiv.firstChild）；
// -------------------------------------------------------------^^^^^^^^^^^
setTimeout（函数（）{
var mycoldiv=document.getElementById（“mycoldiv”）；
document.getElementById（“playerContainer”）.removeChild（myColdIV）；
}, 1500);
您孩子的直接父母是markerDiv，因此您应该调用remove from markerDiv，如下所示：

markerDiv.removeChild(myCoolDiv);

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

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

现在，如果您确信确实将节点插入了DOM，那么删除节点的最简单常规方法是：

markerDiv.parentNode.removeChild(markerDiv);

这适用于任何节点（只需将markerDiv替换为其他节点），并直接查找节点的父节点，以便从中调用remove。如果您不确定是否添加了它，请在调用removeChild之前仔细检查parentNode是否非空。
正如其他人所提到的，
MyColdIV
是
markerDiv
的子节点，而不是
playerContainer
。如果您想删除MyColdIV

，但出于某种原因保留

markerDiv

，您可以执行以下操作

myCoolDiv.parentNode.removeChild(myCoolDiv);

---

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

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

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

//不起作用
//工作

当我将其更改为normal，div时，作为一个家长，我对它进行了包装，它工作正常

在

vue.js

项目中，我也遇到了类似的问题。然后，我得到了将

片段

包装器更改为HTML元素的提示。片段最常见的用例可能是当您需要返回多个元素时。对于片段，这很容易，并且不需要为元素使用典型的包装器div。它的简短语法是

基本上，我在

Vue

中使用了片段模式，然后使用

transition

动态渲染组件时出现了上述错误。动态组件（包含多个元素）似乎需要用HTML元素包装，而不是用片段包装

// Vuejs
<transition
  name="router-anim"
  enter-active-class="animated animated-enter"
  mode="out-in"
  leave-active-class="animated animated-exit"
>
  <router-view /> // dynamic rendering based on current route using vue-router
</transition>

//Vuejs
//使用vue路由器基于当前路由的动态渲染