条件付きでセレクト要素からアイテムを削除する

概要：このチュートリアルでは、条件に基づいてセレクト要素からアイテムを削除するためにJavaScriptを使用する方法を学習します。

JavaScriptは、<select>要素を表すためにHTMLSelectElementクラスを使用します。セレクト要素からオプションを削除するには、HTMLSelectElementオブジェクトのremove()メソッドを使用します。

<select>要素に、対応するインデックス0、1、2を持つ3つの<option>要素があるとします。

例:

値	テキスト	インデックス
A	アイテムA	0
B	アイテムB	1
C	アイテムC	2

remove()メソッドを呼び出して要素を1つ削除すると、インデックスはすぐに変更されます。

たとえば、インデックス1の2番目の要素（B）を削除すると、3番目の要素（C）のインデックスは1になります。

値	テキスト	インデックス
A	アイテムA	0
C	アイテムC	1

よくある間違いは、<select>要素のオプションを繰り返し処理し、インデックスが調整されていることを認識せずにループ内で要素を削除することです。

たとえば、次のコードは値BとCを持つアイテムを削除しようとします。しかし、Bは削除されますが、Cは削除されません。

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo</title>
    </head>

    <body>
        <label for="list">Alphabet</label>
        <select id="list">
            <option value="A">Item A</option>
            <option value="B">Item B</option>
            <option value="C">Item C</option>
        </select>
        <script>
            const select = document.querySelector('#list')
            for (let i = 0; i < select.options.length; i++) {
                const value = select.options[i].value;
                if (value === 'B' || value === 'C') {
                    select.remove(i);
                    // index of C will become 1 but the value of i is 2
                    // therefore C will be not removed
                }
            }
        </script>
    </body>

</html>Code language: HTML, XML (xml)

出力

アイテムCを削除するには、アイテムBを削除した後にインデックスを減らす必要があります。次の例は正しく動作します。

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo</title>
    </head>

    <body>
        <label for="list">Alphabet</label>
        <select id="list">
            <option value="A">Item A</option>
            <option value="B">Item B</option>
            <option value="C">Item C</option>
        </select>
        <script>
            const select = document.querySelector('#list')
            let indices = []
            for (let i = 0; i < select.options.length; i++) {
                const value = select.options[i].value;
                if (value === 'B' || value === 'C') {
                    select.remove(i);
                    // decrease i by one because the index has been
                    // adjusted
                    i--
                }
            }
        </script>
    </body>

</html>Code language: HTML, XML (xml)

出力

実用的な例

次の例は、アイテムテキストが文字列jsで終わるリストからアイテムを削除する方法を示しています。

プロジェクト構造:

├── css
|  └── style.css
├── js
|  └── app.js
└── index.html

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title>Demo</title>
    </head>
    <body>
        <main>
            <label for="framework">Framework:</label>
            <select id="framework" multiple>
                <option value="1">Angular</option>
                <option value="2">React</option>
                <option value="3">Vue.js</option>
                <option value="4">Ember.js</option>
                <option value="5">Svelte</option>
                <option value="6">Next.js</option>
            </select>
            <p>Click the Remove button to remove framework ended with js like Vue.js</p>
            <button class="btn">Remove</button>
        </main>
        <script src="js/app.js"></script>
    </body>
</html>Code language: HTML, XML (xml)

app.js

const select = document.querySelector('#framework');
const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  for (let i = 0; i < select.options.length; i++) {
    const text = select.options[i].text;
    if (text.endsWith('js')) {
      select.remove(i);
      i--;
    }
  }
});Code language: JavaScript (javascript)

出力

このチュートリアルは役に立ちましたか？