「JavaScript」removeChildメソッドで複数の要素を削除する方法

2022年6月20日

構文
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」が削除されます。

JavaScript

Posted by arkgame

関連記事: