このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Node: removeChild() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
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);
仕様書
| 仕様書 |
|---|
| DOM> # dom-node-removechild> |