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 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 6

For jquery < 1.8 you can use :

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

to remove a especific range of the select options.

Answer 7

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 8

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");
    }
});