Written by Kasumi

【JavaScript】任意のイベントで子要素を全て削除する方法

JavaScriptで任意のイベントを実行したら、子要素を全て削除したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
JavaScriptで子要素を全て削除
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

ボタンを押すとリストが全て削除されます。

リストはul・li要素で構成。

ulの子要素であるli要素が全て削除された事になります。

実装方法は以下の通りです。

子要素を全て削除する

// 親要素
const ul = document.querySelector('ul');

document.querySelector('button').addEventListener('click', function () {
  // 子要素を全て削除
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
});

子要素を全て削除するコード例です。

子要素の親要素を変数に定義

任意のイベントはクリックイベントを実行します。

addEventListenerを使いクリックイベントを定義。

コールバック関数に子要素を削除するコードを記述します。

子要素を削除するにはwhile文を使います。

whileの条件式に親要素.firstChildを指定。

親要素に子要素が存在したらループ処理を実行します。

whileの処理でremoveChildメソッドを使用。

removeChildは子要素のDOMを削除するメソッドです。

親要素の変数とremovechildを連結。

引数にwhileの条件式と同じく親要素.firstChildを指定。

子要素が全て削除されます。

以上で実装完了です。

まとめ

JavaScriptで任意のイベントを実行したら、子要素を全て削除する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS JavaScript

スクロールバーが表示されない。SimpleBarを使おう!【即解決】

更新日:2022.09.09
9951
JavaScript

JavaScriptでJSONデータを読み込み・HTMLへ出力する方法

2022.10.16
23267
JavaScript

【JavaScript】文字列から必要な特定文字のみ切り出す方法

2023.01.27
821
JavaScript

JavaScriptで文字列の指定位置にHTMLタグを入れる方法

2022.12.15
1611