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?

You using jQuery or not? – Jack Ducasse Jul 12 '16 at 01:34 — Jack Ducasse, Jul 12 '16 at 01:34

JF-Mechs · Accepted Answer · 2016-07-12T02:25:03.897

7

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();

edited Jul 12 '16 at 02:25

answered Jul 12 '16 at 01:54

JF-Mechs

1,083
10
23

no I do not want to hide an element with a class name. I want to hide the **parent** div which *can't* be defined by class name since all the parents have the same class. – agvr3 Jul 12 '16 at 01:58
@agvr3 see updated notes. The code hides the parent div depending on the child element class which I believe in your example 'classB' – JF-Mechs Jul 12 '16 at 02:02
It is **not** a direct descendant. Updated question with more code to clarify. – agvr3 Jul 12 '16 at 02:02
that being said, I suggest you use a little jQuery. See updated answer. – JF-Mechs Jul 12 '16 at 02:09
could you include a fiddle of what have you tried? It works fine with me :) – JF-Mechs Jul 12 '16 at 02:18
1

this part only, worked! `$('.classB').closest('.mainDiv').hide();` what this line of code did, is that when a `.mainDiv` div contaned an inner div which has the class `.classB`, it ***removed*** the `.mainDiv` div from the page. PERFECT! A+ – agvr3 Jul 12 '16 at 02:18
Grats! I'll leave the above code for a small reference to others. Have a nice day! – JF-Mechs Jul 12 '16 at 02:20

score 4 · Answer 2 · answered Jul 12 '16 at 01:40

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>

that method only hides immediate parent. I need to hide a specific parent. — agvr3, Jul 12 '16 at 02:34
Ah ok, you can use: $(".childB").parents(".mainDiv").hide() or $(".childB").closest(".mainDiv").hide() — imazzara, Jul 12 '16 at 16:37

ClayKaboom · Answer 3 · 2016-07-12T02:25:56.300

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>

I tried this but it doesn't hide `.mainDiv`, it only hides `.childB`. How can i hide the whole `.mainDiv` when it contains a child with class `.childB`? — agvr3, Jul 12 '16 at 01:54
again this new update did not hide the `.mainDiv` div (like the other answer did) but only the child. — agvr3, Jul 12 '16 at 02:24
@agvr3 Now I understood your problem, try this new piece of code — ClayKaboom, Jul 12 '16 at 02:26
someone else already gave your edited answer. and yes it works as i had already accepted their answer that was exactly the same. so thank you. although you did add additional notes on `.closest` query which was helpful so thanks. — agvr3, Jul 12 '16 at 02:31

score 2 · Answer 4 · answered Jul 12 '16 at 01:47

2

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();

answered Jul 12 '16 at 01:47

nobodyshere

208
1
5

that method only hides immediate parent. I need to hide a specific parent. – agvr3 Jul 12 '16 at 02:02

score 1 · Answer 5 · answered Jul 12 '16 at 01:40

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>

that method only hides immediate parent. I need to hide a specific parent. — agvr3, Jul 12 '16 at 02:07

score 1 · Answer 6 · answered Jul 12 '16 at 01:41

1

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

answered Jul 12 '16 at 01:41

Hector Barbossa

5,506
13
48
70

this doesn't work because it only hides the immediate parent but my example was simplified; i need to hide it based on the class `.mainDiv` – agvr3 Jul 12 '16 at 01:52
that method only hides immediate parent. I need to hide a specific parent. – agvr3 Jul 12 '16 at 02:03

score 1 · Answer 7 · answered Jul 12 '16 at 01:47

1

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";
    }
}

answered Jul 12 '16 at 01:47

Jack jdeoel

4,554
5
26
52

it does have many children, my example was simplified, will this work if there are many children but i only want to hide if there is a child with the class `.childB`? – agvr3 Jul 12 '16 at 01:53

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

7 Answers7

Linked