javascript removeChildでノードを削除する

作成日 2021.04.07
更新日 2022.08.13
javascript
javascript

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

1. 環境
2. removeChild使い方
3. 存在しないノードを指定
4. クラス名を指定して複数のノードを削除
5. コードの簡潔化
6. サンプルコード

環境

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

Javascript サンプル集はこちら

removeChild使い方

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

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

removeChild使い方

<div id="main">
  <p id="one">one</p>
  <p id="two">two</p>
</div>

<script>

'use strict';

// 親ノード
const elm = document.getElementById("main");
// 削除するノード
const one = document.getElementById("one");

// 削除
elm.removeChild(one);

</script>

use strictについてはこちら

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

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

const one = document.getElementById("one");

// 削除
one.parentNode.removeChild(one);

実行結果

存在しないノードを指定

存在しないノードを指定すると、エラーが発生します。

<ul class="foo">
    <li class="one">li01</li>
    <li class="two">li02</li>
    <li class="two">li03</li>
</ul>

<button id="btn">削除</button>

<script>

'use strict';

// 親ノード
const elm = document.getElementById("noelm");
// 削除するノード
const one = document.getElementById("one");

// 削除
elm.removeChild(one);
// Uncaught TypeError: Cannot read properties of null (reading 'removeChild')

</script>

存在チェックを行えば、エラーは回避できます。

'use strict';

// 親ノード
const elm = document.getElementById("noelm");
// 削除するノード
const one = document.getElementById("one");

if(elm !== null) elm.removeChild(one);

クラス名を指定して複数のノードを削除

「getElementsByClassName」で「クラス名」を指定して「複数のノード」を削除するには「forEach」などのループ処理を使用します。
※「スプレッド構文」で「HtmlCollection」を配列として操作します。

<div id="main">
    <p class="one">one</p>
    <p class="two">two</p>
    <p class="two">two</p>
    <p class="two">two</p>
</div>

<script>

'use strict';

// 親ノード
const elm = document.getElementById("main");

// 削除するノード
const two = document.getElementsByClassName("two");

if (0 < two.length) {
    [...two].forEach(function (v) { return elm.removeChild(v) })
}

</script>

実行結果

「for文」を使用することもできます。

// 親ノード
const elm = document.getElementById("main");

// 削除するノード
const two = document.getElementsByClassName("two");

for (let i = two.length; i--;) {
    elm.removeChild(two[i]);
}

コードの簡潔化

また、以下のコードを、

// 親ノード
const elm = document.getElementById("main");
// 削除するノード
const one = document.getElementById("one");

// 削除
elm.removeChild(one);

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

main.removeChild(one);

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

サンプルコード

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

※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 = () => { main.removeChild(main.firstChild) };

  }

</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 id="main" class="space-y-4">
        <span class="block rounded-md text-white font-extrabold text-center bg-green-500 p-6">削除するノード</span>
        <span class="block rounded-md text-white font-extrabold text-center bg-green-500 p-6">削除するノード</span>
        <span class="block rounded-md text-white font-extrabold text-center bg-green-500 p-6">削除するノード</span>
      </div>
    </div>

  </div>
</body>

</html>

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