JQuery find.Selector but not nested selector (.selector.selector)

Question

I would like to find all the elements that match the selector, but not if it is already contained in the corresponding element.

$('#container').find('.child').not('.child .child');

Note that .child elements do not need direct descendants.

why doesn't it work?

I would like to highlight the entire element that appears in $('#container').find('.child'), but exclude / filter()any that will be here $('#container').find('.child .child'), because one of its ancestors is.child

var children = $('#container').find('.child').filter(function (i, el) {
    return !$(el).closest('.child').length;
});

for some reason this does not work either JSFIDDLE

snippet adapted from @RonenCypis answer

var selector = ' .child ';
var children = $('#container').find(selector).filter(function(i, el) {
  return !$(el).closest(selector).length;
});
children.css('background-color', 'blue');

#container div {
  float: left;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: #fff;
  margin: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="child">one
    <div class="child">one one</div>
  </div>
  <div class="child">two
    <div class="child">two one</div>
  </div>
  <div class="child">three</div>
  <div class="child">four
    <div class="child">four one</div>
  </div>
</div>

Run code

Answer 1

parents closest, . closest .

var selector = ' .child ';
var children = $('#container').find(selector).filter(function(i, el) {
  return !$(el).parents(selector).length;
});
children.css('background-color', 'blue');

#container div {
  float: left;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: #fff;
  margin: 10px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="child">one
    <div class="child">one one</div>
  </div>
  <div class="child">two
    <div class="child">two one</div>
  </div>
  <div class="child">three</div>
  <div class="child">four
    <div class="child">four one</div>
  </div>
</div>

Answer 2

:has() :not()

$('div').find('[role="tabpanel"]:not(:has([role="tabpanel"]))');

Answer 3

Demo in JsFiddle

You can use filter()for this:

HTML

<div id="container">
    <div class="child">
        <div class="child"></div>
    </div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child">
        <div class="child"></div>
    </div>
</div>

CSS

#container div {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: red;
}

Javascript

var selector = '.child';
var children = $('#container').find(selector).filter(function(i, el){
    return $(el).find(selector).length == 0;
});

children.css('background-color', 'blue');

This code will change the background color only for elements .childthat do not have additional elements .childinside them.