Reduce array of DOM elements to the ones with the deepest level in JavaScript
<p>Let's assume i have HTML markup like this:</p>

<pre><code>&lt;body&gt;
  &lt;div id="content"&gt;
    &lt;div id="sidebar"&gt;
    &lt;/div&gt;
    &lt;div id="main"&gt;
        &lt;p class="foo"&gt;text&lt;/p&gt;
        &lt;p class="bar"&gt;more &lt;span&gt;text&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Let's further assume that i selected some of them in an array of DOM elements:</p>

<pre><code>var allElements = jQuery('div,p').get();
// result: [div#content, div#sidebar, div#main, p.foo, p.bar]
</code></pre>

<p>Now i want to efficiently remove all elements from the result set which have a child in the result. In other words, only the deepest level should remain. So, the desired result would be:</p>

<pre><code>var deepestElements = doSomethingWith(allElements);
// desired result: [div#sidebar, p.foo, p.bar]
</code></pre>

<p><strong>How can i do this?</strong></p>

<p>By the way: "Deepest elements" seems to be the wrong term for what i am trying to do. Is there any better name?</p>
