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

仕様書

ブラウザーの対応

BCD tables only load in the browser

関連情報