jQuery remove options from select

jQuery remove options from select

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?

Solutions/Answers:

Solution 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();

Solution 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.

Solution 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.

Solution 4:

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();

Solution 5:

For jquery < 1.8 you can use :

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

to remove a especific range of the select options.

Related:  AngularJS : Factory and Service? [duplicate]

Solution 6:

It works on either option tag or text field:

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