Node.removeChild()

由於本文件沒有此語言的翻譯版本,您閱讀的是英文版的內容。 幫助我們翻譯這篇文章!

Node.removeChild() 方法從 DOM 移除一個子節點,並返回移除的節點。

語法

var oldChild = node.removeChild(child);

node.removeChild(child);
  • child 是從 DOM 要被移除的子節點。
  • node 是 child 的父節點。
  • oldChild 存有被移除的子節點的參照,例如:oldChild === child.

被刪除的子節點仍然存在於內存,但不在 DOM 之中了。從上述的第一種語法形式中,我們知道,透過引用 oldChild 還是可以在程式中重新使用已經被移除的子節點。

而第二種語法形式,因為沒有保留 oldChild 引用,因此假設你並沒有在其他地方保留節點引用,則它會立即無法使用且不可挽回,而且通常會在短時間內從內存管理中被自動刪除。

如果 child 並非某 element 節點的子元素,則此方法會拋出異常。而如果調用此方法時,child 雖是某 element 的子元素,但在嘗試刪除它的過程中已被其他事件處理程序刪除,也會拋出異常(例如 blur)。

錯誤拋出

兩種不同的方式拋出異常:

  1. 如果 child 確實是 element 的子元素且確實存在於 DOM,但已被刪除,則拋出以下異常:

    Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

  2. 如果 child 不存在於頁面的 DOM,則會拋出下列的異常:

    Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

例子

簡單的例子

HTML:

<div id="top">
  <div id="nested"></div>
</div>

在知道父節點的情況下,刪除特定元素:

let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);

沒有指定父節點的情況下,刪除特定元素:

let node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

從一個元素中移除所有子元素:

let element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Causing a TypeError

<!--Sample HTML code-->
<div id="top"> </div>

<script type="text/javascript">
  let top = document.getElementById("top");
  let nested = document.getElementById("nested");

  // Throws Uncaught TypeError
  let garbage = top.removeChild(nested);
</script>

Causing a NotFoundError

<!--Sample HTML code-->
<div id="top">
  <div id="nested"></div>
</div>

<script type="text/javascript">
  let top = document.getElementById("top");
  let nested = document.getElementById("nested");

  // This first call correctly removes the node
  let garbage = top.removeChild(nested);

  // Throws Uncaught NotFoundError
  garbage = top.removeChild(nested);
</script>

規範

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
removeChildChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 5Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

相關連結