drop down menu - How do I use jQuery to select all children except a select element

Question

I have a div (let's say the id is "container") with many elements in it, including a select element. I'd like to select all everything in the div except the select. Things I've tried:

$("#container *:not(select)")
$("#container *:not(#selectorid)")

//put a div around the select and...
$("#container *:not(#selectorcontainer)")
$("#container *:not(#selectorcontainer *)")
$("#container *:not(#selectorcontainer, #selectorcontainer *)")

Also tried without wildcard descendant selector, so just like all the above, but

$("#container:not(#selectorid)")

Answer 1

You can simply omit the wildcard as it is optional in this case, but keep the space:

$('#container :not(select)');

Alternatively, use the .not() method to filter out the select after selecting all children:

$('#container').children().not('select');

If your problem is that children of select are still included, you could explicitly filter those out with the .not() method:

$('#container').children().not('select, option, optgroup');

or select direct children only:

$('#container > :not(select)');

You can try out jQuery selectors at the interactive jQuery selector tester for quick feedback; try for example div :not(ol) or div > :not(ol) to get a feel for what difference the direct child (>) selector makes.