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

Coba Sendiri

例子 2

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

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

Coba Sendiri

例子 3

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

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

Coba Sendiri

例子 4

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

element.parentNode.removeChild(element);

Coba Sendiri

例子 5

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

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

Coba Sendiri

Contoh 6: Tampilkan

Gunakan appendChild() atau insertBefore() untuk memasukkan node yang dihapus ke dalam dokumen yang sama.

Dapat digunakan document.adoptNode() atau document.importNode() untuk dimasukkan ke dokumen lain.

Contoh di bawah ini menghapus elemen dari elemen induknya dan memasukkannya ke dalam dokumen lain:

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

Coba Sendiri

Sintaks

element.removeChild(node)

atau

node.removeChild(node)

Parameter

Parameter Deskripsi
node Diperlukan. Node (element) yang akan dihapus.

Kembalian

Tipe Deskripsi
Node

Node yang dihapus (element).

Jika node anak tidak ada, maka null.

Dukungan Peramban

element.removeChild() Adalah Fitur DOM Level 1 (1998).

Semua peramban mendukungnya sepenuhnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan