× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

How to use jQuery to select all children except a select element

Martijn Pieters
Sep 05, 2014
<p>You can simply omit the wildcard as it is optional in this case, but keep the space:</p><pre><code><span style="font-size:14px">$</span><span style="font-size:14px">(</span><span style="color:rgb(128, 0, 0); font-size:14px">'#container :not(select)'</span><span style="font-size:14px">);</span></code></pre><p>Alternatively, use the .not() method to filter out the select after selecting all children:</p><pre><code><span style="font-size:14px">$</span><span style="font-size:14px">(</span><span style="color:rgb(128, 0, 0); font-size:14px">'#container'</span><span style="font-size:14px">).</span><span style="font-size:14px">children</span><span style="font-size:14px">().</span><span style="color:rgb(0, 0, 139); font-size:14px">not</span><span style="font-size:14px">(</span><span style="color:rgb(128, 0, 0); font-size:14px">'select'</span><span style="font-size:14px">);</span></code></pre><p>If your problem is that children of <code>select</code> are still included, you could explicitly filter those out with the .not() method:</p><pre><code><span style="font-size:14px">$</span><span style="font-size:14px">(</span><span style="color:rgb(128, 0, 0); font-size:14px">'#container'</span><span style="font-size:14px">).</span><span style="font-size:14px">children</span><span style="font-size:14px">().</span><span style="color:rgb(0, 0, 139); font-size:14px">not</span><span style="font-size:14px">(</span><span style="color:rgb(128, 0, 0); font-size:14px">'select, option, optgroup'</span><span style="font-size:14px">);</span></code></pre><p>or select direct children only:</p><pre><code><span style="font-size:14px">$</span><span style="font-size:14px">(</span><span style="color:rgb(128, 0, 0); font-size:14px">'#container &gt; :not(select)'</span><span style="font-size:14px">);</span></code></pre><p>You can try out jQuery selectors at <a href="http://www.woods.iki.fi/interactive-jquery-tester.html">the interactive jQuery selector tester</a> for quick feedback; try for example <code>div :not(ol)</code> or <code>div &gt; :not(ol)</code> to get a feel for what difference the direct child (<code>&gt;</code>) selector makes.</p><p>This tip was originally posted on <a href="http://stackoverflow.com/questions/1125700/how-do-i-use-jquery-to-select-all-children-except-a-select-element/1126074#1126074">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus