What is the right jquery selector to get all instances of a div based on content inside that div?

Question

I have the following html:

<div class="list">
 <div class="sortable">
        <div class="contentItem"> Some content </div>
        <div class="contentItem"> Some content </div>
        <div class="contentItem"> Some content </div>
 </div>
</div>

<div class="list">
 <div class="sortable">
 </div>
</div>

<div class="list">
 <div class="sortable">
        <div class="contentItem"> Some content </div>
        <div class="contentItem"> Some content </div>
        <div class="contentItem"> Some content </div>
 </div>
 </div>

 <div class="list">
 <div class="sortable">
 </div>
 </div>

and i am trying to hide all of the "list" classes that don't have any "contentItem" divs inside of them. So its basically taking this

 $(".list").hide();   

which would hide all but ignore the ones that have "contentItem" elements in them

is this possible as a jquery selector?

Answer 1

Use :not() and :has()

$(".list:not(:has('.contentItem'))").hide(); 

Fiddle Demo

Answer 2

You can use :not() along with :has() pseudo selector to accomplish your task.

Try,

 $(".list:not(:has('.contentItem'))").hide(); 

DEMO