Removing Items from a Select Element Conditionally

Summary: in this tutorial, you’ll learn how to use JavaScript to remove items from a select element based on a condition.

JavaScript uses the HTMLSelectElement class to represent the <select> element. To remove an option from a select element, you use the remove() method of the HTMLSelectElement object.

Suppose the <select> element has three <option> elements with the corresponding index 0, 1, and 2:

For example:

Value	Text	Index
A	Item A	0
B	Item B	1
C	Item C	2

When you call the remove() method to remove one element, the index will change immediately.

For example, if you remove the second element (B) with index 1, the index of the third element (C) will become 1:

Value	Text	Index
A	Item A	0
C	Item C	1

A common mistake is to iterate over the options of a <select> element and remove the element inside the loop without being aware that the indices have been adjusted.

For example, the following attempts to remove items with the values B and C. However, it only removes the item B but not 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)

Output:

To remove item C, you need to decrease the index after removing item B. The following example will work properly:

<!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)

Output:

A practical example

The following example illustrates how to delete items from a list where the item text ends with the string js.

Here’s the project structure:

├── 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)

Output:

Was this tutorial helpful ?