其他堆栈答案,如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'
。
我做错了什么?
7条答案
按热度按时间vatpfxk51#
你的
myCoolDiv
元素不是播放器容器的子元素。它是你为它创建的 Package 器div
的子元素(在代码的第一部分中是markerDiv
)。这就是为什么它失败了,removeChild
只删除子元素,而不是子元素。您可能希望删除该 Package 器div,或者根本不添加它。
以下是“根本不添加”选项:
或者不使用 Package 器(尽管它对于解析HTML非常方便):
yqyhoc1h2#
对我来说,一个将有问题的元素 Package 在另一个HTML标签中的提示帮助了我。然而,我还需要向该HTML标签添加一个键。例如:
nimxete23#
你的子节点的直接父节点是markerDiv,所以你应该像这样从markerDiv调用remove:
或者,您可能希望删除markerNode。由于该节点直接附加到videoContainer,因此可以使用以下命令删除它:
现在,如果你绝对确信你已经将一个节点插入到DOM中,最简单的方法是:
这适用于任何节点(只需将markerDiv替换为不同的节点),并直接找到节点的父节点,以便从中调用remove。如果您不确定是否添加了它,请在调用removeChild之前仔细检查parentNode是否为非null。
w8ntj3qf4#
当我把它改为normal,div时,我用〈〉〈/〉作为父对象 Package 了它,它工作得很好
mec1mxoz5#
正如其他人提到的,
myCoolDiv
是markerDiv
的子节点,而不是playerContainer
。JSFiddle
y1aodyip6#
我在
vue.js
项目中遇到了类似的问题。然后,我得到了将fragment
Package 器更改为HTML元素的提示。片段最常见的用例可能是当您需要返回多个元素时。使用片段很容易,并且您不需要为元素使用典型的 Package 器div。它的简短语法是<></>
。基本上,我在
Vue
中使用了fragment模式,然后我得到了上面的错误,使用transition
动态渲染组件。看起来动态组件(需要多个元素)需要用HTML元素 Package ,而不是片段。q1qsirdb7#
在next.js 13中,如果您使用app目录,并且忘记将
<html>
和<body>
open close标记放入app/layout.tsx
文件中,您可能也会看到此错误。