「JavaScript」removeChildメソッドで複数の要素を削除するサンプル

2022年10月3日

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.62

構文
1.変数名 = document.getElementById(セレクター名);
指定要素を取得します

2.複数の要素をループで使用します
for(let i = 変数名.childNodes.length-1; i>=0; i–){

3.複数の要素をループで削除します
変数名.removeChild(変数名.childNodes[i]);

使用例

<!DOCTYPE html>
<html>
<body>

<script>
function delAll(){　　
　//要素tAの取得　　
  const cft = document.getElementById("tA");
   // 複数の要素をループする
  for(let i = cft.childNodes.length-1; i>=0; i--){
    // 複数の要素を削除
     cft.removeChild(cft.childNodes[i]);
  }
}
</script>
<div id="tA">
      <div id="tB">
            <p>tokyo</a>
  </div>
  <div id="tC">
            <p>oosaka</a>
      </div>
</div>
<input type="button" value="削除" onclick="delAll()">

</body>
</html>

実行結果
「削除」ボタンを押すと、複数の要素(div要素tBとtC)を削除します

JavaScript

Posted by arkgame

関連記事: