Node: removeChild() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
removeChild() は Node インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。
メモ: 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。 これは、後のコードで再利用することができます。
removeChild() の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから自動的に削除されます。
Node.cloneNode() とは異なり、返値は関連付けられた EventListener オブジェクトを保持します。
構文
js
removeChild(child)
引数
例外
NotFoundErrorDOMException-
childがこのノードの子ではない場合に発生します。 TypeError-
childがnullであった場合に発生します。
例
単純な例
この HTML を使います。
html
<div id="top">
<div id="nested"></div>
</div>
親ノードが分かる場合に、指定された要素を取り除きます。
js
let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
親ノードが分からないときに指定された要素を取り除きます。
js
let node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
ある要素からすべての子を削除します。
js
let element = document.getElementById("idOfParent");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
TypeError が発生する例
html
<!--HTML コードの例-->
<div id="top"></div>
js
let top = document.getElementById("top");
let nested = document.getElementById("nested");
// TypeError が発生
let garbage = top.removeChild(nested);
NotFoundError が発生する例
html
<!--HTML コードの例-->
<div id="top">
<div id="nested"></div>
</div>
js
let top = document.getElementById("top");
let nested = document.getElementById("nested");
// 最初の呼び出しでは正しくノードを取り除く
let garbage = top.removeChild(nested);
// NotFoundError が発生
garbage = top.removeChild(nested);
仕様書
| Specification |
|---|
| DOM # dom-node-removechild |