节点：removeChild() 方法

removeChild() 是 Node 接口的方法，用于从 DOM 中删除子节点并返回已删除的节点。

注意： 只要对已删除的子节点保留引用，它仍然存在于内存中，但不再是 DOM 的一部分。它仍然可以在代码中稍后重用。

如果 removeChild() 的返回值未存储，并且没有保留其他引用，它将在短时间后从内存中自动删除。

与 Node.cloneNode() 不同的是，返回值会保留与其关联的 EventListener 对象。

语法

js
removeChild(child)

参数

child

一个将要从 DOM 中删除的子节点 Node。

异常

NotFoundError DOMException

如果 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);

// Throws NotFoundError
garbage = parent.removeChild(child);

规范

规范
DOM 标准
# dom-node-removechild

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅