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
の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。
このメソッドでは、2つの異なる方法で例外が発生します。
-
child
が実際にelement
の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
. -
child
がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
例
<!-- 対象とする HTML のコード -->
<div id="top" > </div>
<script type="text/javascript">
var top = document.getElementById("top");
var nested = document.getElementById("nested");
var garbage = top.removeChild(nested); //Test Case 2: the method throws the exception (2)
</script>
<!--Sample HTML code-->
<div id="top">
<div id="nested"></div>
</div>
<script type="text/javascript">
var top = document.getElementById("top");
var nested = document.getElementById("nested");
var garbage = top.removeChild(nested); // This first call remove correctly the node
// ......
garbage = top.removeChild(nested); // Test Case 1: the method in the second call here, throws the exception (1)
</script>
<!--Sample HTML code-->
<div id="top">
<div id="nested"></div>
</div>
// 親ノードから指定した子要素を除去
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
// 親要素が不明、不定の場合の方法
var node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
// 要素の全ての子を除去
var element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
仕様書
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。