How to hide a parent div if an inner div has a certain class, with javascript

Question

Ok so say I have many divs. Some of the divs, the children have one class, other divs the children have a different class.

I want to hide only the divs which have a child with a certain class.

For example,

<div class="mainDiv">
    <div class="kulkul">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childB">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="kulkul">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childA">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="kulkul">
        <div class="childB">
        </div>
    </div>
</div>

<div class="mainDiv">
    <div class="lalala">
        <div class="childA">
        </div>
    </div>
</div>

Now above, let's say that I only want to hide the parent divs which have a child div with the class .childB

This can't be done with CSS as far as I know (CSS3 anyway), because CSS doesn't allow you to style the parent div, only a child div. And the parent .mainDiv divs (the ones I want to hide) are all exactly the same.

So that leaves javascript.

Using the example above, how can I hide all the .mainDiv divs which contain a child div with the class .childB ?

Answer 1

HIDING PARENT ELEMENT based on its direct descendant

//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB'
var elementToHideList = document.getElementsByClassName("sample-element-to-hide");
for (var i = elementToHideList.length; i--;)
    elementToHideList[i].parentNode.style.display = "none";

HIDING PARENT ELEMENT based on its child element.

//Solution for the OP
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide.
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className.

$('.classB').closest('.mainDiv').hide();

Answer 2

You can do this with pure javascript:

 var elementsChildB = document.getElementsByClassName("childB") for(var i = 0 ; i < elementsChildB.length ; i++){ elementsChildB[i].parentNode.style.display = "none" ; } 

 <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> 

Or with Jquery:

 $(".childB").parent().hide() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> 

Answer 3

Using jQuery you could use the following selector. This will hide all mainDiv containing childB but not mainDiv that contain other elements or childB without a mainDiv as its parent (in whichever level , by the use of closest - https://api.jquery.com/closest/ ) :

 $(".childB").closest(".mainDiv").hide();

Fiddle:

 $(function() { $(".childB").closest(".mainDiv").hide(); }); 

 .childB { background-color: red; border: 1px solid black; height: 50px; margin-left:20px; } .childA { background-color: green; border: 1px solid black; height: 50px; margin-left:10px; } .mainDiv { background-color: yellow; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="mainDiv"> <div class="childB"> </div> </div> <div class="mainDiv"> PARENT <div class="childA">Don't hide </div> </div> <div class="mainDiv"> PARENT <div class="childB">To be hidden </div> </div> <div class="mainDiv"> This contains a child A which contains a child B: <br /> <div class="childA">It is a child A <div class="childB">To be hidden </div> </div> </div> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="childB">Should not be hidden </div> 

Answer 4

Javascript Method

var childB = document.getElementsByClassName("childB");
for(var e = 0; e <= childB.length; e++){
  childB[e].parentNode.style.display = "none"; 
}

JQuery Method

$('.childB').parent().hide();

Answer 5

Well, you can use .parent() method to select the parent node of specified child nodes, and use .hide() to hide the selected parent nodes.

 $('.childB').each(function() { $(this).parent().hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childB"> B </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childB"> B </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> 

Answer 6

使用jQuery， $('.childA').parent().hide();

Answer 7

Grab all div of mainDiv class and loop for each can check children class has specific class !!

var main = document.getElementsByClassName("mainDiv");
for(var i = 0; i < main.length ; i++){
    if(main[i].children[0].classList[0] == "childB"){ //assure only has one children
        main[i].style.display = "none";
    }
}