「JavaScript」removeChildメソッドで複数の要素を削除する方法
構文
Node.removeChild()
removeChild() は Node インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。
removeChild(child);
child: Node で、 DOM から取り除きたい子ノードを指定します。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cftA">
<div id="tob">
<p>tokyo</a>
</div>
<div id="toc">
<p>oosaka</a>
</div>
</div>
<input type="button" value="削除" onclick="del()">
<script>
function del(){
const cftA = document.getElementById("cftA");
for (let i=cftA.childNodes.length-1; i>=0; i--) {
/*指定要素を削除*/
cftA.removeChild(cftA.childNodes[i]);
}
}
</script>
</body>
</html>
実行結果
「削除」ボタンを押下すると、div要素「cftA」、「cftB」、「cftC」が削除されます。