javascript removeでクラス名を指定して複数の要素を削除する

作成日 2022.08.12
更新日 2022.12.22
javascript
javascript

javascriptで、removeでクラス名を指定して複数の要素を削除するサンプルコードを掲載してます。複数の要素をループ処理することで可能です。ブラウザはchromeを使用しています。

1. 環境
2. クラス名を指定して複数の要素を削除
3. while
4. for文
5. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 108.0.5359.125

Javascript サンプル集はこちら

クラス名を指定して複数の要素を削除

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

<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';

document.getElementById('btn').addEventListener('click', function () {

    const elm = document.getElementsByClassName('two');

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

});

</script>

use strictについてはこちら

実行結果を見ると、クラス「two」要素が全て削除されているが確認できます。

while

以下のようにwhile文を使用することも可能です。

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

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

</div>

<script>

'use strict';

document.getElementById('btn').addEventListener('click', function () {

    const elm = document.getElementsByClassName('two');

    if (0 < elm.length) {
        while (elm.length) {
            elm.item(0).remove()
        }
    }

});

</script>

for文

for文も使用できます。

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

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

</div>

<script>

'use strict';

document.getElementById('btn').addEventListener('click', function () {

    const elm = document.getElementsByClassName('two');

    console.log(elm.length)

    for (let i = elm.length;i--;) {       
        elm.item(i).remove();
    }

});

</script>

サンプルコード

以下は、
「削除」ボタンをクリックして、指定したクラスの「html要素」を全て削除する
サンプルコードとなります。

※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>

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

    <p class="chg">削除する要素</p>
    <p class="chg">削除する要素</p>
    <p class="chg">削除する要素</p>
    <p class="chg">削除する要素</p>
    <p class="chg">削除する要素</p>

    <div id="sample" class="flex flex-col justify-center">
      <button id="btn"
        class="bg-gradient-to-r from-blue-500 to-purple-700 hover:from-pink-500 hover:to-yellow-500 text-white py-2 px-4 rounded-full mb-3 mt-4">
        削除
      </button>
    </div>

  </div>

  <script>

    btn.onclick = () => {

      const elm = document.getElementsByClassName('chg');

      if (0 < elm.length) {
        [...elm].forEach(v => v.remove())
      }

    };

  </script>
</body>

</html>

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