HTML DOM 元素 removeChild()
示例
從列表中移除第一個元素
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
之前
- 咖啡
- 茶
- 牛奶
之後
- 茶
- 牛奶
如果列表有子節點，則移除第一個（索引 0）
const list = document.getElementById("myList");
if (list.hasChildNodes()) {
list.removeChild(list.children[0]);
}
自己動手試一試 »
從列表中移除所有子節點
const list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
自己動手試一試 »
更多示例見下文。
描述
removeChild() 方法移除元素的子節點。
注意
該子節點將從文件物件模型（DOM）中移除。
然而，返回的節點可以被修改並重新插入到 DOM 中（參見“更多示例”）。
另請參閱
語法
element.removeChild(node)或
node.removeChild(node)
引數
| 引數 | 描述 |
| node | 必需。 要移除的節點（元素）。 |
返回值
| 型別 | 描述 |
| 節點 | 被移除的節點（元素）。 如果子節點不存在，則為 null。 |
更多示例
示例
從其父節點移除一個元素，然後再次插入
const element = document.getElementById("myLI");
function removeLi() {
element.parentNode.removeChild(element);
}
function appendLi() {
const list = document.getElementById("myList");
list.appendChild(element);
}
自己動手試一試 »
注意
使用 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() 是 DOM Level 1 (1998) 的一個特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
