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

作成日 2021.04.10
更新日 2022.08.15
javascript
javascript

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

1. 環境
2. 自分自身のノードを削除
3. removeChild使い方
4. parentNode使い方
5. サンプルコード

環境

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

Javascript サンプル集はこちら

自分自身のノードを削除

「removeChild」と「parentNode」を使用すると、自分自身の親ノードを取得して、その子ノードを削除することが可能なため、自分自身のノードを削除することができます。

removeChild使い方

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

親ノード.removeChild(削除するノード)

parentNode使い方

「parentNode」は、親ノードを取得することができます。

ノード.parentNode

この2つを実際に使用してみます。

<div><p>test</p></div>
<button id="main">button</button>
<p>test</p>

<script>

'use strict';

document.getElementById('main').addEventListener('click',
  function(event) {
    event.target.parentNode.removeChild(this);
  }
)

</script>

use strictについてはこちら

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

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

document.getElementById('main').addEventListener('click',
  function (event) {
    const node = document.getElementById("main");
    node.parentNode.removeChild(node);
  }
)

また、以下のコードを、

document.getElementById('main').addEventListener('click',
  function(event) {
    event.target.parentNode.removeChild(this);
  }
)

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

main.addEventListener('click',
  function() {
    event.target.parentNode.removeChild(this);
  }
)

document.getElementByIdの省略して記述する

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

main.addEventListener('click',
  () => {
    event.target.parentNode.removeChild(main);
  }
)

アロー関数の使い方

サンプルコード

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

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

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<script>

  window.onload = () => {

    add.onclick = () => { add.parentNode.removeChild(add); };

  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <button id="add"
        class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 text-white py-2 px-4 rounded-full mb-3 mt-4">
        自分自身を削除
      </button>

    </div>

  </div>
</body>

</html>

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