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 支持 支持 支持 支持