「JavaScript」removeChildメソッドで複数の要素を削除するサンプル
環境
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)を削除します