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