HTML DOM Element removeChild() 方法

定义和用法

removeChild() 方法删除元素的子节点。

该方法以 Node 对象返回被删除的节点;如果节点不存在,则返回 null

提示

子节点从是文档对象模型(DOM)中删除的。

但是,可以修改返回的节点并将其插回 DOM(请参阅下方的实例)。

另请参阅:

remove() 方法

appendChild() 方法

insertBefore() 方法

replaceChild() 方法

childNodes 属性

firstChild 属性

lastChild 属性

firstElementChild 属性

lastElementChild 属性

实例

例子 1

从列表中删除第一个元素:

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

删除之前:

  • Coffee
  • Tea
  • Milk

删除之后:

  • Tea
  • Milk

亲自试一试

例子 2

如果列表有子节点,则删除第一个(索引 0):

const list = document.getElementById("myList");

if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

亲自试一试

例子 3

从列表中删除所有子节点:

const list = document.getElementById("myList");

while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

亲自试一试

例子 4

从其父节点中删除一个元素:

element.parentNode.removeChild(element);

亲自试一试

例子 5

从其父元素中删除一个元素,然后再次插入:

const element = document.getElementById("myLI");

function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

亲自试一试

例子 6:提示

请使用 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(node)

node.removeChild(node)

参数

参数 描述
node 必需。要删除的节点(元素)。

返回值

类型 描述
Node

被删除的节点(元素)。

如果子节点不存在,则为 null。

浏览器支持

element.removeChild() 是 DOM Level 1 (1998) 特性。

所有浏览器都完全支持它:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持