JQuery: how to exclude from selection div elements that contain a span element?

Question

I have selected a group of div elements from a table, filtered the selection to only the div elements that contain the class __gwt_cell , and I have saved them into an array, with this command

var myarray = $('table > tbody > tr > td > div').filter('div[__gwt_cell]')

Now I would like to exclude from this selection all the div elements that contain a span element, so all the snippets like this:

<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-615" tabindex="0">
    <span class="gwt-CheckBox">
        <input type="checkbox" class="filled-in" tabindex="-1" value="on" id="gwt-uid-708"> 
        <label for="gwt-uid-708"></label>
    </span>
</div>

In order to do this, I have read this thread , reverted the syntax of the solution, and wrote this command

var myarray = $('table > tbody > tr > td > div').filter('div[__gwt_cell]').filter('div:not(div span)');

that unfortunately does not work.

How can I get the desired result?

Answer 1

the :has() selector is what you need

var myarray = $('table > tbody > tr > td > div').filter('div[__gwt_cell]').not('div:has(span)');

the last piece of the command, that is .not('div:has(span)') , is saying

"exclude div elements that have at least one span element as child "