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

2022年3月16日

環境
Google Chrome　99.0.4844.51

関数
親ノード.removeChild(子ノード);
removeChildメソッドを使って、引数の子ノードを削除します。

書式

const 変数名 = document.getElementById("要素タグ名");
for (let i=変数名.childNodes.length-1; i>=0; i--) {
変数名.removeChild(変数名.childNodes[i]);
}

複数の要素はループを使用して削除します。

使用例

<!DOCTYPE html>
<html>
<body>
<div id="cftA">
      <div id="cftB">
            <p>test data 1111</a>
      </div>
    	<div id="cftC">
            <p>test data 2222</a>
      </div>
</div>
<input type="button" value="削除">
<script>
function delBtn(){
      const ge = document.getElementById("cftA");
       for (let i=ge.childNodes.length-1; i>=0; i--) {
       ge.removeChild(ge.childNodes[i]);
  }
  
}
</script>

</body>
</html>

実行結果
「削除」ボタンを押すと、div要素「cftA」と「cftB」の内容が削除されます。

JavaScript

Posted by arkgame