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.

Answer 2

You can also try it using traversing methods:

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

or being a final option:

$('#container').children().filter(function(){     return $(this).attr('id') !== 'selectorId'; }