Remove selected option from drop-down list with jQuery

This post will discuss how to remove the selected option from the dropdown list with jQuery.

With jQuery, you can use the .remove() method to takes elements out of the DOM. To get the selected item from a dropdown, you can use the :selected property and call remove() on the matched element.

JS

$(document).ready(function() {

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

// get the selected option and remove it from the DOM

$('#pets option:selected').remove();

});

HTML

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

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

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

</select>

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

Edit in JSFiddle

There are numerous ways to get the selected option of the select element with the :selected property:

$("select option:selected").remove();

$("select :selected").remove();

$(":selected", $("select")).remove();

$("select option").filter(":selected").remove();

$("select").children("option").filter(":selected").remove();

$("select").children("option:selected").remove();

$("select").find("option:selected").remove();

Another solution is to use the eq() selector. As of jQuery 3.4, the :eq pseudo-class is deprecated and should not be used.

JS

$(document).ready(function() {

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

// get the selected index

var index = $('#pets')[0].selectedIndex;

// remove the selected index from the DOM

$(`#pets option:eq(${index})`).remove();

})

});

HTML

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

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

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

</select>

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

Edit in JSFiddle

That’s all about removing the selected option from the drop-down list with jQuery.

Remove selected option from drop-down list with jQuery

JS

HTML

JS

HTML

Share this: