「JavaScript」removeChildで複数の要素を削除する
書式
Node.removeChild() メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。
var oldChild = node.removeChild(child);
引数
child は DOM から取り除く、子ノードです。
node は child の親ノードです。
使用例
<div id="cft"> <div id="ma"> <span>tokyo 東京</span> </div> <div id="mb"> <span>oosaka 大阪</span> </div> <div id="mc"> <span>fukuoka 福岡</span> </div> </div> <input type="button" value="削除"> <script> function delNode(){ //cftに一致するhtml要素の取得 const ele = document.getElementById("cft"); // 複数の要素はループを使用 for (let i=ele.childNodes.length-1; i>=0; i--) { // 指定要素が削除される ele.removeChild(ele.childNodes[i]); } } </script>
実行結果
「削除」ボタンを押下すると、idが「cft」のdiv要素が削除される