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

Kokeile itse

例子 2

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

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

Kokeile itse

例子 3

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

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

Kokeile itse

例子 4

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

element.parentNode.removeChild(element);

Kokeile itse

例子 5

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

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

Kokeile itse

Esimerkki 6: Vinkki

Poistetun solun voidaan lisätä samaan dokumenttiin käyttämällä appendChild() tai insertBefore() -metodeja.

Dokumenttiin voidaan lisätä document.adoptNode() tai document.importNode() avulla.

Esimerkissä poistetaan elementti sen vanhemmista ja lisätään toiseen dokumenttiin:

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

Kokeile itse

Syntaksi

element.removeChild(node)

tai

node.removeChild(node)

Parametrit

Parametrit Kuvaus
node Välttämätön. Poistettava solu (elementti).

Palautusarvo

Tyyppi Kuvaus
Node

Poistettu solu (elementti).

Jos lapsisolua ei ole, palauttaa null.

Selaimen tuki

element.removeChild() Se on DOM Level 1 (1998) ominaisuus.

Kaikki selaimet tukevat sitä täysin:

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