Node：removeChild() 方法
Node 接口的 removeChild() 方法会从 DOM 中移除一个子节点，并返回被移除的节点。
注意： 只要对被移除的子节点保留了引用，它仍然存在于内存中，但不再是 DOM 的一部分。它仍然可以在代码中稍后重用。
如果 removeChild() 的返回值没有被存储，并且没有其他引用被保留，那么它将在短时间后被 自动删除 出内存。
与 Node.cloneNode() 不同，返回值会保留与之关联的 EventListener 对象。
语法
js
removeChild(child)
参数
返回值
被移除的 child 节点。
异常
NotFoundErrorDOMException-
如果
child不是该节点的子节点，则抛出此异常。 TypeError-
如果
child为null，则抛出此异常。
示例
简单示例
给定此 HTML
html
<div id="parent">
<div id="child"></div>
</div>
已知其父节点时移除指定元素
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);
移除指定元素，无需指定其父节点
js
const node = document.getElementById("child");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
移除元素的所有子节点
js
const element = document.getElementById("idOfParent");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
导致 TypeError
html
<!--Sample HTML code-->
<div id="parent"></div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Throws Uncaught TypeError
const garbage = parent.removeChild(child);
导致 NotFoundError
html
<!--Sample HTML code-->
<div id="parent">
<div id="child"></div>
</div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// This first call correctly removes the node
const garbage = parent.removeChild(child);
// Second call throws NotFoundError
parent.removeChild(child);
规范
| 规范 |
|---|
| DOM # dom-node-removechild |
浏览器兼容性
加载中…