javascript 自分自身のノードを削除する

javascript 自分自身のノードを削除する

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

環境

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

removeChild使い方

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

parentNode使い方

親ノードを取得します。

自分自身のノードを削除

removeChildとparentNodeを使って、自分自身の親ノードから子ノードを削除することが可能です。

実行結果をみると、ボタンクリックで自身の親ノードをparentNodeで取得して、自分自身のノードを削除して表示されていることが確認できます。

js部は、以下のように記述した方がわかりやすかったと思います。すいません。

また、以下のコードを、

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

また、アロー関数化すると、アロー関数はthisを持たないので以下のようになります。

サンプルコード

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

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

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