HTML DOM 元素 removeChild()
示例
从列表中移除第一个元素
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
之前
- 咖啡
- 茶
- 牛奶
之后
- 茶
- 牛奶
如果列表有子节点,则移除第一个(索引 0)
const list = document.getElementById("myList");
if (list.hasChildNodes()) {
list.removeChild(list.children[0]);
}
自己动手试一试 »
从列表中移除所有子节点
const list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
自己动手试一试 »
更多示例见下文。
描述
removeChild()
方法移除元素的子节点。
注意
该子节点将从文档对象模型(DOM)中移除。
然而,返回的节点可以被修改并重新插入到 DOM 中(参见“更多示例”)。
另请参阅
语法
element.removeChild(node)
或
node.removeChild(node)
参数
参数 | 描述 |
node | 必需。 要移除的节点(元素)。 |
返回值
类型 | 描述 |
节点 | 被移除的节点(元素)。 如果子节点不存在,则为 null 。 |
更多示例
示例
从其父节点移除一个元素,然后再次插入
const element = document.getElementById("myLI");
function removeLi() {
element.parentNode.removeChild(element);
}
function appendLi() {
const list = document.getElementById("myList");
list.appendChild(element);
}
自己动手试一试 »
注意
使用 appendChild() 或 insertBefore() 将被移除的节点插入到同一个文档中。
使用 document.adoptNode() 或 document.importNode() 将其插入到另一个文档中。
示例
从其父节点移除一个元素并将其插入到另一个文档中
const child = document.getElementById("mySpan");
function remove() {
child.parentNode.removeChild(child);
}
function insert() {
const frame = document.getElementsByTagName("IFRAME")[0]
const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
const x = document.adoptNode(child);
h.appendChild(x);
}
自己动手试一试 »
浏览器支持
element.removeChild()
是 DOM Level 1 (1998) 的一个特性。
所有浏览器都完全支持。
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |