Remove an option from a drop-down list with JavaScript/jQuery

This post will discuss how to remove a given option from a dropdown list in JavaScript and jQuery.

1. Using jQuery

To remove an option from a dropdown list, you can use jQuery’s .remove() method. The .remove() method will remove the specified elements out of the DOM.

Using jQuery’s attribute selector, you can use any of the following methods to find the corresponding <option> element:

$("select option[value=cat]")

$("select option").filter("[value=cat]")

$("select").children("option").filter("[value=cat]")

$("select").children("option[value=cat]")

$('select').find('option[value=cat]')

Here’s a complete example.

JS

$(document).ready(function() {

$('#submit').click(function() {

$("#pets option[value=cat]").remove();

})

});

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

<button id="submit">Remove Cat</button>

Edit in JSFiddle

2. Using JavaScript

In plain JavaScript, you can get the corresponding option with the querySelector() method and call the JavaScript’s remove() method upon it.

JS

document.getElementById('submit').onclick = function() {

document.querySelector('#pets option[value=cat]').remove();

}

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

<button id="submit">Remove Cat</button>

Edit in JSFiddle

That’s all about removing an option from a drop-down list in JavaScript and jQuery.

Remove an option from a drop-down list with JavaScript/jQuery

1. Using jQuery

JS

HTML

2. Using JavaScript

JS

HTML

Share this: