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 の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。

このメソッドでは、2つの異なる方法で例外が発生します。

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>

<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);
}

仕様書

• DOM Level 1 Core: removeChild
• DOM Level 2 Core: removeChild
• DOM Level 3 Core: removeChild

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• Node.replaceChild
• Node.parentNode
• ChildNode.remove