Remove select option with specific value

Question

How can I remove <option value="0">Value 0</option> from the <select> menu based on the value 0?

<select id="someid">
  <option value="0">Value 0</option>
  <option value="1">Value 1</option>
</select>

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

You don't need Prototype JS to do this.

Removing an option by index:

var select = document.getElementById('someid')
select.removeChild(select.options[0])

<select id='someid'>
    <option value='0'>Value 0</option>
    <option value='1'>Value 1</option>
</select>

Removing an option with a specific value:

var select = document.getElementById('someid')
select.removeChild(getOptionByValue(select, '0'))

function getOptionByValue (select, value) {
    var options = select.options;
    for (var i = 0; i < options.length; i++) {
        if (options[i].value === value) {
            return options[i]  
        }
    }
    return null
}

<select id='someid'>
    <option value='0'>Value 0</option>
    <option value='1'>Value 1</option>
</select>

Or, inspired by this answer:

(Edit: RobG submitted this technique before me; all credit hereafter to him. I saw his comment critiquing my answer and began editing my post accordingly, but didn't scroll down far enough to see his answer as well, which had addressed that issue already.)

var select = document.getElementById('someid')
select.removeChild(select.querySelector('option[value="0"]'))

<select id='someid'>
    <option value='0'>Value 0</option>
    <option value='1'>Value 1</option>
</select>

edited May 23 '17 at 12:16

Community

1
1

answered Dec 13 '16 at 02:16

gyre

16,369
3
37
47

While this is correct, it doesn't answer the question of removing an option with a specific value. :-/ – RobG Dec 13 '16 at 03:43
Good point. I edited my answer to include an alternative option for that more general use case. – gyre Dec 13 '16 at 03:56
@gyre @RobG - Great technique if I can get it to work. In RobG's `inspired` solution, how do I supply a variable value in place of `0` ? Say my ID value is `var tValue = 1108 ;` - how can I inject that intothe `querySelector()` ? I have tried several methods and none of them are working. Keep getting `The node to be removed is not a child of this node` error using `siteIDs.removeChild(siteIDs.querySelector( 'option[value="' +tValue+ '"]')) ;` - but the node def exists. – rolinger Mar 30 '20 at 18:50
`select.querySelector("option[value='0']").remove();`. – Sebastian Simon Sep 11 '21 at 19:05

score 2 · Answer 2 · answered Dec 13 '16 at 03:59

You can use a selector to get an option with a specific value, then remove it. The following uses querySelector, but you could also loop over all the options and find the one(s) with the required value and remove them the same way.

function removeOption() {
  var optValue = document.getElementById('i0').value;
  var errorEl = document.getElementById('errorMessage');
  var optElement = document.querySelector('option[value="' + optValue + '"]');
  if (optElement) {
    errorEl.textContent = '';
    optElement.parentNode.removeChild(optElement);
  } else {
    errorEl.textContent = 'There is no option with value "' + optValue + '"';
  }
}

#errorMessage {
  background-color: white;
  color: red;
}

<select id='someid'>
    <option value='0'>Value 0</option>
    <option value='1'>Value 1</option>
</select>
<br>
Remove option with value: 
  <input id="i0">
  <button onclick="removeOption()">Remove option</button>
  <br>
  <span id="errorMessage"></span>

Remove select option with specific value

2 Answers2

Linked