Question

I have a HTML select like this:

<select name="something">
    <option value="a">1</option>
    <option value="b">2</option>
    <option value="c">3</option>
</select>

and I’ve noticed that jquery interprets that options are hidden HTML tags. The problem comes when I have to remove real hidden tags like in this example:

<form action="#" id="f">
    <select name="something">
        <option value="a">1</option>
        <option value="b">2</option>
        <option value="c">3</option>
    </select>
    <p style="display:none">hello world</p>
    <any_tag style="display:none">some text</any_tag>
</form>

If I execute this:

$("#f :hidden").remove();

all options are removed. The question is why jquery removes options? and what is the most appropriate selector to remove only hidden tags? (well or not option tags)

Here is a test.

Answer 1

You could just add the functionality that should already be there 😛

$("#f :hidden:not(option)").remove();