javascript removeChildでノードを削除する

javascript removeChildでノードを削除する

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

環境

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

removeChild使い方

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

removeChild使い方

実行結果をみると、指定したノード(id=one)が削除されて表示されることが確認できます。

親ノードを「parentNode」で取得して削除することも可能です。

また、以下のコードを、

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

サンプルコード

以下は、
「ノードを削除」ボタンをクリックして、親ノード内の最初のノードを「firstChild」で指定して削除する
サンプルコードとなります。

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

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