「JavaScript」removeChildで複数の要素を削除する
環境
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="削除" onclick="delBtn()">
<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」の内容が削除されます。