jQuery remove options from select

Question

I have a page with 5 selects that all have a class name 'ct'. I need to remove the option with a value of 'X' from each select while running an onclick event. My code is:

$(".ct").each(function() {
    $(this).find('X').remove();
   });

Where am I going wrong?

Answer 1

Try this:

$(".ct option[value='X']").each(function() {
    $(this).remove();
});

Or to be more terse, this will work just as well:

$(".ct option[value='X']").remove();

Answer 2

$('.ct option').each(function() {
    if ( $(this).val() == 'X' ) {
        $(this).remove();
    }
});

Or just

$('.ct option[value="X"]').remove();

Main point is that find takes a selector string, by feeding it x you are looking for elements named x.

Answer 3

find() takes a selector, not a value. This means you need to use it in the same way you would use the regular jQuery function ($('selector')).

Therefore you need to do something like this:

$(this).find('[value="X"]').remove();

See the jQuery find docs.

Answer 4

It works on either option tag or text field:

$("#idname option[value='option1']").remove();

Answer 5

If no id or class were available for the option values, one can remove all the values from dropdown as below

$(this).find('select').find('option[value]').remove();

Answer 6

Iterating a list and removing multiple items using a find. Response contains an array of integers. $('#OneSelectList') is a select list.

$.ajax({
    url: "Controller/Action",
    type: "GET",
    success: function (response) {
        // Take out excluded years.
        $.each(response, function (j, responseYear) {
            $('#OneSelectList').find('[value="' + responseYear + '"]').remove();
        });
    },
    error: function (response) {
        console.log("Error");
    }
});

Answer 7

Something that has quickly become my favorite thing to do with removing an option is not to remove it at all. This method is beneficial for those who want to remove the option but might want to re-add it later, and make sure that it's added back in the correct order.

First, I actually disable that option.

$("#mySelect").change(
    function() {

        $("#mySelect").children('option[value="' + $(this).val() + '"]').prop("disabled", true);

        $("#re-addOption").click(
            function() {
                $("#mySelect").children('option[value="' + howeverYouStoredTheValueHere + '"]').prop("disabled", false);
            }
        );
    }
);

and then to clean up, in my CSS, I set disabled options to be hidden, because hiding an option in some browsers doesn't work, but using the method above, clients with those browsers wont be able to select the option again.

select option[disabled] {
    display: none;
}

Personally, on the re-addOption element, I have a custom property of data-target="value", and in place of howeverYouStoredTheValueHere, I use $(this).attr('data-target').

Answer 8

To remove all Options

$(".select").empty();

To remove all Options and add a blank option

$(".select").empty().append(new Option('--Select--',''));

Answer 9

if your dropdown is in a table and you do not have id for it then you can use the following jquery:

var select_object = purchasing_table.rows[row_index].cells[cell_index].childNodes[1];
$(select_object).find('option[value='+site_name+']').remove();

Answer 10

For jquery < 1.8 you can use :

$('#selectedId option').slice(index1,index2).remove()

to remove a especific range of the select options.

Answer 11

When I did just a remove the option remained in the ddl on the view, but was gone in the html (if u inspect the page)

$("#ddlSelectList option[value='2']").remove(); //removes the option with value = 2
$('#ddlSelectList').val('').trigger('chosen:updated'); //refreshes the drop down list

Answer 12

Try this for remove the selected

$('#btn-remove').click(function () {
    $('.ct option:selected').each(function () {
        $(this).remove();
    });
});

Answer 13

I tried this code:

$("#select-list").empty()