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

2014年6月4日2021年10月25日

書式
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="削除" onclick="delNode()">
<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要素が削除される