How to remove the option with a value of -1 from all drop-down menus in pure Js, please

How to remove the option with a value of -1 from all drop-down menus in pure Js, please

<!DOCTYPE html>
<html>
    <body>

        <select id="Australian-Brother" class="Australian-Brother" size="1" >
            <option value="-1">weapons</option>
            <option value="0">BHP Group Limited. ...</option>
            <option value="1">Westpac Banking Corp.</option>
            <option value="2">National Australia Bank.</option>
            <option value="3">ANZ Banking Group Limited.</option>                    
        </select> 

        <select id="Australian-Brother" class="Australian-Brother" size="1" >
            <option value="-1">weapons</option>
            <option value="0">BHP Group Limited. ...</option>
            <option value="1">Westpac Banking Corp.</option>
            <option value="2">National Australia Bank.</option>
            <option value="3">ANZ Banking Group Limited.</option>                    
        </select> 

        <select id="Australian-Brother" class="Australian-Brother" size="1" >
            <option value="-1">weapons</option>
            <option value="0">BHP Group Limited. ...</option>
            <option value="1">Westpac Banking Corp.</option>
            <option value="2">National Australia Bank.</option>
            <option value="3">ANZ Banking Group Limited.</option>                    
        </select> 

        <select id="Australian-Brother" class="Australian-Brother" size="1" >
            <option value="-1">weapons</option>
            <option value="0">BHP Group Limited. ...</option>
            <option value="1">Westpac Banking Corp.</option>
            <option value="2">National Australia Bank.</option>
            <option value="3">ANZ Banking Group Limited.</option>                    
        </select> 

        <script type="text/javascript">

            selectobject = document.querySelector('.Australian-Brother');

            for (var i = 0; i < selectobject.length; i++) {

                if (selectobject.options[i].value == '-1')
                    selectobject.remove(i);

            }
            ;

        </script>

    </body>

Hi @manoodin, first query for all options with a value of -1:

var optionsToRemove = document.querySelectorAll('option[value="-1"]')

Then remove() each of those options:

optionsToRemove.forEach(function (option) {
  option.remove()
})

If you’re caring about IE support it’s going to be slightly more verbose though:

Array.prototype.forEach.call(optionsToRemove, function (option) {
  option.parentNode.removeChild(option)
})
1 Like

While we’re at it tho…
#1: You can’t meaningfully reuse the same ID multiple times. (ID is a unique construction.)
#2: Declaring a select’s size to be 1 is redundant (that’s the default).

2 Likes

Thank you so much Brother It worked

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.