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

Subukan nang personal

例子 2

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

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

Subukan nang personal

例子 3

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

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

Subukan nang personal

例子 4

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

element.parentNode.removeChild(element);

Subukan nang personal

例子 5

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

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

Subukan nang personal

Halimbawa 6: Babala

Gumamit ng appendChild() o insertBefore() upang ilagay ang na-alis na bungkalinan sa parehong dokumento.

Maaaring gamitin ang document.adoptNode() o document.importNode() upang ilagay ito sa ibang dokumento.

Ang halimbawa na ito ay nag-alis ng isang element mula sa kanyang magulang na element at inilagay sa ibang dokumento:

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

Subukan nang personal

Gramata

element.removeChild(node)

o

node.removeChild(node)

Parametro

Parametro Paglalarawan
node Mandahil. Ang bungkalinan (element) na dapat alisin.

Halimbawa ng pagbabalik

Uri Paglalarawan
Node

Ang na-alis na bungkalinan (element).

Kung ang anak na bata ay wala, ito ay null.

Suporta ng Browser

element.removeChild() Ito ay DOM Level 1 (1998) na katangian.

Lahat ng mga browser ay ganap na sumusuporta sa ito:

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