Node:removeChild() 方法
Node
接口的 removeChild()
方法会从 DOM 中移除一个子节点,并返回移除的节点。
备注:只要对被移除的子节点保持引用,它仍然存在于内存中,但不再是 DOM 的一部分。在以后的代码中仍可重复使用。
如果不存储 removeChild()
的返回值,也不保留其他引用,该节点将在短时间内在内存中自动删除。
与 Node.cloneNode()
不同,返回值保留了与其关联的 EventListener
对象。
语法
js
removeChild(child)
参数
异常
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
<!--HTML 代码示例-->
<div id="parent"></div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// 抛出未捕获的 TypeError
const garbage = parent.removeChild(child);
引发 NotFoundError
html
<!--HTML 代码示例-->
<div id="parent">
<div id="child"></div>
</div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// 第一次调用正确并移除了该节点。
const garbage = parent.removeChild(child);
// 抛出 NotFoundError
garbage = parent.removeChild(child);
规范
Specification |
---|
DOM Standard # dom-node-removechild |
浏览器兼容性
BCD tables only load in the browser