javascript 无法在节点上执行removeChild

h7appiyu 于 2023-04-10 发布在 Java

关注(0)|答案(7)|浏览(236)

其他堆栈答案，如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'。
我做错了什么？

JavaScript

来源：https://stackoverflow.com/questions/42956884/failed-to-execute-removechild-on-node

7条答案

按热度按时间

vatpfxk51#

你的myCoolDiv元素不是播放器容器的子元素。它是你为它创建的 Package 器div的子元素（在代码的第一部分中是markerDiv）。这就是为什么它失败了，removeChild只删除子元素，而不是子元素。
您可能希望删除该 Package 器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>

或者不使用 Package 器（尽管它对于解析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>

赞(0）回复(0）举报 2023-04-10

yqyhoc1h2#

对我来说，一个将有问题的元素 Package 在另一个HTML标签中的提示帮助了我。然而，我还需要向该HTML标签添加一个键。例如：

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

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

赞(0）回复(0）举报 2023-04-10

nimxete23#

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

markerDiv.removeChild(myCoolDiv);

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

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

现在，如果你绝对确信你已经将一个节点插入到DOM中，最简单的方法是：

markerDiv.parentNode.removeChild(markerDiv);

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

赞(0）回复(0）举报 2023-04-10

w8ntj3qf4#

当我把它改为normal，div时，我用〈〉〈/〉作为父对象 Package 了它，它工作得很好

赞(0）回复(0）举报 2023-04-10

mec1mxoz5#

正如其他人提到的，myCoolDiv是markerDiv的子节点，而不是playerContainer。

myCoolDiv.parentNode.removeChild(myCoolDiv);

JSFiddle

赞(0）回复(0）举报 2023-04-10

y1aodyip6#

我在vue.js项目中遇到了类似的问题。然后，我得到了将fragment Package 器更改为HTML元素的提示。片段最常见的用例可能是当您需要返回多个元素时。使用片段很容易，并且您不需要为元素使用典型的 Package 器div。它的简短语法是<></>。
基本上，我在Vue中使用了fragment模式，然后我得到了上面的错误，使用transition动态渲染组件。看起来动态组件（需要多个元素）需要用HTML元素 Package ，而不是片段。

// 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>

赞(0）回复(0）举报 2023-04-10

q1qsirdb7#

在next.js 13中，如果您使用app目录，并且忘记将<html>和<body> open close标记放入app/layout.tsx文件中，您可能也会看到此错误。

赞(0）回复(0）举报 2023-04-10