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

Prova det själv

例子 2

如果列表有子节点，则删除第一个（索引 0）：

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Prova det själv

例子 3

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

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Prova det själv

例子 4

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

element.parentNode.removeChild(element);

Prova det själv

例子 5

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

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

Prova det själv

Exempel 6: Varning

Använd appendChild() eller insertBefore() för att lägga till det borttagna noden i samma dokument.

Du kan använda document.adoptNode() eller document.importNode() för att lägga till det i ett annat dokument.

Nedan är ett exempel på att ta bort ett element från dess förälderelement och lägga till det i ett annat dokument:

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);
}

Prova det själv

Syntaks

element.removeChild(node)

eller

node.removeChild(node)

Parameter

Parameter Beskrivning
node Obligatoriskt. Noden (elementet) att ta bort.

Returvärde

Typ Beskrivning
Node

Det borttagna noden (elementet).

Om undernoden inte finns, är det null.

Webbläsarstöd

element.removeChild() är DOM Level 1 (1998) egenskap.

Alla webbläsare stöder det fullt ut:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd