Node.removeChild() メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。

構文

var oldChild = node.removeChild(child);
または
node.removeChild(child);
  • child は DOM から取り除く、子ノードです。
  • elementchild の親ノードです。
  • 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);
}

仕様書

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非推奨非標準
Chrome 完全対応 ありEdge ? Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, fscholz, jsx, ethertank, Ryotakano
最終更新者: mfuji09,