javascript removeChildでnameを指定して複数の要素を一括で削除する

作成日 2022.08.18
更新日 2022.11.16
javascript
javascript

javascriptで、removeChildでnameを指定して複数の要素を一括で削除するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. nameを指定して複数の要素を一括で削除する
3. whileを使用
4. forEachを使用
5. サンプルコード

環境

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

Javascript サンプル集はこちら

nameを指定して複数の要素を一括で削除する

「getElementsByName」で「name」を指定して「複数の要素」を一括で削除するには「for」文などのループ処理を使用します。

<div id="parent">
    <input type="text" name="sample" value="aaa">
    <input type="text" name="delsample" value="bbb">
    <input type="text" name="delsample" value="ccc">
    <input type="text" name="delsample" value="ddd">
    <input type="text" name="delsample" value="eee">
    <input type="text" name="sample" value="fff">
</div>

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

<script>

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

    // 親ノード
    const parentNode = document.getElementById("parent");

    // 削除するノード
    const delNode = document.getElementsByName("delsample");

    // 親ノードの存在チェック
    if(parentNode !== null){

        // 削除するノード存在チェック
        if (0 < delNode.length) {

            // for文を使用して削除
            for (let i = delNode.length; i--;) {
                parentNode.removeChild(delNode[i]);
            }
            
        }

    }

})

</script>

実行結果を見ると、ボタンをクリックするとname「delsample」が全て削除されているが確認できます。

whileを使用

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

<div id="parent">
    <input type="text" name="sample" value="aaa">
    <input type="text" name="delsample" value="bbb">
    <input type="text" name="delsample" value="ccc">
    <input type="text" name="delsample" value="ddd">
    <input type="text" name="delsample" value="eee">
    <input type="text" name="sample" value="fff">
</div>

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

<script>

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

    // 親ノード
    const parentNode = document.getElementById("parent");

    // 削除するノード
    const delNode = document.getElementsByName("delsample");

    // 親ノードの存在チェック
    if(parentNode !== null){

        // 削除するノード存在チェック
        if (0 < delNode.length) {

            while (delNode.length) {
                parentNode.removeChild(delNode[0]);
            }
            
        }

    }

})

</script>

forEachを使用

「forEach」を使用して削除することも可能です。

<div id="parent">
    <input type="text" name="sample" value="aaa">
    <input type="text" name="delsample" value="bbb">
    <input type="text" name="delsample" value="ccc">
    <input type="text" name="delsample" value="ddd">
    <input type="text" name="delsample" value="eee">
    <input type="text" name="sample" value="fff">
</div>

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

<script>

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

    // 親ノード
    const parentNode = document.getElementById("parent");

    // 削除するノード
    const delNode = document.getElementsByName("delsample");

    // 親ノードの存在チェック
    if(parentNode !== null){

        // 削除するノード存在チェック
        if (0 < delNode.length) {

            [...delNode].forEach(function(v){ return parentNode.removeChild(v) });
            
        }

    }

})

</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 parentNode = document.getElementsByClassName("container")[0];

      // 削除するノード
      const delNode = document.getElementsByTagName("p");

      // 親ノードの存在チェック
      if (parentNode !== null) {

        // 削除するノード存在チェック
        if (0 < delNode.length) [...delNode].forEach( v => parentNode.removeChild(v) ) 

      }

    };

  </script>
</body>

</html>

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