JQuery Remove Select Option From List

Question

I have the following select box (I am not able to add a class or ID to the select form which is why I wrapped it in a div):

<div id="test"><select name="wpv-yr">
<option value="0" selected="selected">All Years</option>
<option value="2010">2010 (6)</option>
<option value="2011">2011 (12)</option>
<option value="2012">2012 (32)</option>
<option value="2013">2013 (129)</option>
<option value="2014">2014 (24)</option>
</select></div>

And I don't want to show the last option, 2014, in the drop down list. I've tried adding:

jQuery(document).ready(function() {
jQuery("div#test option[value=2014]").remove();
});

I've also tried single quotes around the value:

jQuery(document).ready(function() {
jQuery("div#test option[value='2014']").remove();
});

But that didn't work either. The 2014 option is still appearing in the list.

Where am I going wrong?

Solution 1

I have just set up a fiddle here, and this works. Are you referencing the JQuery library in the page? The only change in my code is replacing jquery with $

$(document).ready(function () {
    $("div#test option[value=2014]").remove();
});

Solution 2

Try

jQuery('div#test option[value="2014"]').remove();

Or

jQuery("div#test option:last-child").remove();

Solution 3

JQUERY

$("#List option:selected").remove();

Fiddle Demo

fiddle

Comments

[gandjyar]

I think that was the problem, I was referencing the JQuery library after calling the function. Switched them around and bingo.

[Christian Phillips]

Glad the hint helped :)