jQuery remove options from select

Question

I have a page with 5 select's 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?

Thanks, Chris

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

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

Therefore you need to do something like this:

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

See the jQuery find docs.

Answer 3

$('.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.