在 Node 上执行 removeChild 失败答案

【问题标题】：Failed to execute removeChild on Node在 Node 上执行 removeChild 失败
【发布时间】：2017-03-22 15:59:27
【问题描述】：

其他堆栈答案，例如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);

在调用removeChild() 之前，一切都按预期正常运行（正确附加了 div，我可以看到它），此时我收到错误Failed to execute 'removeChild' on 'Node'。

我做错了什么？

【问题讨论】：

标签： javascript

【解决方案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);

&lt;div id="playerContainer"&gt;&lt;/div&gt;

或者不使用包装器（尽管解析 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);

&lt;div id="playerContainer"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

markerDiv.removeChild(myCoolDiv);

或者，您可能想要删除markerNode。由于该节点直接附加到 videoContainer，因此可以使用以下命令将其删除：

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

现在，删除节点最简单的通用方法是，如果您绝对确信您确实将其插入到 DOM 中，那么是这样的：

markerDiv.parentNode.removeChild(markerDiv);

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

【讨论】：

【解决方案4】：

正如其他人所提到的，myCoolDiv 是 markerDiv 的孩子，而不是 playerContainer。如果您想删除myCoolDiv 但出于某种原因保留markerDiv，您可以执行以下操作

myCoolDiv.parentNode.removeChild(myCoolDiv);

JSFiddle

【讨论】：

【解决方案5】：

当我将它更改为 normal ， div 时，我将它以 > 作为父级包装，它工作正常

【讨论】：

【解决方案6】：

我在vue.js 项目中遇到了类似的问题。然后，我得到了将 fragment 包装器更改为 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>

【讨论】：