「JavaScript」removeChild関数で複数の要素を削除する

2022年4月20日

書式
removeChild(child);
child　Node で、 DOM から取り除きたい子ノードを指定します。

removeChild() は Node インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。
Node.cloneNode() とは異なり、返値は関連付けられた EventListener オブジェクトを保持します。

使用例

<!DOCTYPE html>
<html>
<body>
<div id="city">
      <div id="cityA">
            <p>東京</p>
  </div>
  <div id="cityB">
            <p>大阪</p>
      </div>
</div>
<input type="button" value="削除" onclick="delFunc()">
<script>
function delFunc(){
   //セレクタID「city」の要素の取得
  const cc = document.getElementById("city");
  for (let i=cc.childNodes.length-1; i>=0; i--) {
  　　　　//指定した要素が削除される
        cc.removeChild(cc.childNodes[i]);
  }
}
</script>

</body>
</html>

実行結果
「削除」ボタンを押下後、複数のdiv要素「cityA」、「cityB」が削除されます。

JavaScript

Posted by arkgame

関連記事: