How to hide parent div if inner div has specific class, with javascript

Question

Ok, say I have a lot of divs. Some of the divs, children have one class, others divs, children have another class.

I want to hide only divs that have a child with a specific 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, let's say I only want to hide the parent .childB that have a child div with the class .childB

This is not possible with CSS as far as I know (CSS3 anyway), because CSS does not allow you to style the parent div, but only the child div. And the parent .mainDiv divs (the ones I want to hide) are all exactly the same.

So this leaves javascript.

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

Answer 1

HIDDEN 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 eg, 'childB' var elementToHideList = document.getElementsByClassName("sample-element-to-hide"); for (var i = elementToHideList.length; i--;) elementToHideList[i].parentNode.style.display = "none"; 

HIDE A PARENT based on its child.

 //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 using 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 can use the following selector. This will hide all mainDiv containing childB but not mainDiv that contain other elements or childB without mainDiv as their parent (at any level using closest - https://api.jquery.com/closest/ ):

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

Violin:

 $(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 the .parent() method to select the parent node of the 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

Using jQuery, $('.childA').parent().hide();

Answer 7

Grab all the divs from the mainDiv class and the loop, for each of which you can check the child class, has a 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"; } }