javascript ノード内の全ての子ノードを削除する

javascript ノード内の全ての子ノードを削除する

javascriptで、removeChildとfirstChildを使用して、ノード内の全ての子ノードを削除するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

removeChild使い方

removeChildを使用すると、子ノードを削除することが可能です。

firstChild使い方

ノード内にある初めのノードを取得します。

全てのノードを削除

removeChildとfirstChildを、使って、ノード内の初めのノードがなくなるまでwhile文で削除することで、全ての子ノードを削除することが可能です。

実行結果をみると、全ての子ノードが削除されて表示されることが確認できます。

また、以下のコードを、

document.getElementByIdの省略して、簡潔に記述することもできます。

サンプルコード

以下は、
「ノードを削除」ボタンをクリックして、全ての子ノードを削除するだけの
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

子ノードが全て削除されていることが確認できます。