Node：removeChild() 方法
Node 介面的 removeChild() 方法會從 DOM 中移除一個子節點，並返回被移除的節點。
注意： 只要對被移除的子節點保留了引用，它仍然存在於記憶體中，但不再是 DOM 的一部分。它仍然可以在程式碼中稍後重用。
如果 removeChild() 的返回值沒有被儲存，並且沒有其他引用被保留，那麼它將在短時間後被 自動刪除 出記憶體。
與 Node.cloneNode() 不同，返回值會保留與之關聯的 EventListener 物件。
語法
js
removeChild(child)
引數
返回值
被移除的 child 節點。
異常
NotFoundErrorDOMException-
如果
child不是該節點的子節點，則丟擲此異常。 TypeError-
如果
child為null，則丟擲此異常。
示例
簡單示例
給定此 HTML
html
<div id="parent">
<div id="child"></div>
</div>
已知其父節點時移除指定元素
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);
移除指定元素，無需指定其父節點
js
const node = document.getElementById("child");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
移除元素的所有子節點
js
const element = document.getElementById("idOfParent");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
導致 TypeError
html
<!--Sample HTML code-->
<div id="parent"></div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Throws Uncaught TypeError
const garbage = parent.removeChild(child);
導致 NotFoundError
html
<!--Sample HTML code-->
<div id="parent">
<div id="child"></div>
</div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// This first call correctly removes the node
const garbage = parent.removeChild(child);
// Second call throws NotFoundError
parent.removeChild(child);
規範
| 規範 |
|---|
| DOM # dom-node-removechild |
瀏覽器相容性
載入中…