Hide parent div if child spans are hidden

Question

I'm trying to hide the parent DIV if all the child spans have a hidden class. There are other divs with the same class in my document that have one or two hidden spans, but I want to only hide the parent div when all three children have the hidden class.

Here's my HTML:

<div class="example">
<span class="hidden">Design</span>
<span class="hidden">Development</span>
<span class="hidden">Branding</span>
</div>

I DO NOT want to hide the parent Div if there are any span elements with a class that is visible. So, if the following is true:

<div class="example">
<span class="visible">Design</span>
<span class="hidden">Development</span>
<span class="visible">Branding</span>
</div>

The example div should still be visible. It should only be visible if all three child spans have the hidden class.

And here's the jQuery I've tried:

$('.example').each(function(){
if($('.hidden')(':visible').length == 0) {
$('.example').hide();
}
});

Needless to say, it hasn't worked.

Edit: selectors changed - I'd updated my example to be more generic.

Your div does not have class project in the example. Is that true in your code as well? — ckundo, Apr 21 '13 at 16:54
possible duplicate of [Hide Parent Div if Child Table is hidden (display: none)](http://stackoverflow.com/questions/12941697/hide-parent-div-if-child-table-is-hidden-display-none) — Lukas Knuth, Apr 21 '13 at 21:27
Please note that the question asks for a solution only when all three child spans have the class hidden. This is not a duplicate. — teeray, Apr 23 '13 at 00:59

David Thomas · Answer 1 · 2013-04-23T07:09:00.483

0

Given that HTML, I'd suggest:

$('.example').each(function(){
    var that = $(this).find('.hidden');
    return that.length === that.not(':visible').length;
});

JS Fiddle demo.

This assumes that the .example element is the relevant parent element you're referring to.

Or a slightly alternative approach:

$('.example').css('display',function(){
    var children = $(this).children();
    return children.length === children.not(':visible').length ? 'none' : 'block';
});

JS Fiddle demo.

References:

edited Apr 23 '13 at 07:09

answered Apr 21 '13 at 16:54

David Thomas

249,100
51
377
410

This hides the parent even if one child is visible, so it did not work. – teeray Apr 23 '13 at 00:58
Somehow I misunderstood, or mis-read the question; the edited version *should* hide the parent if *all* the children are hidden. – David Thomas Apr 23 '13 at 06:57

Swarne27 · Answer 2 · 2013-04-23T03:48:31.177

Try this way, if the parent div class is 'example`

$(document).ready(function (){
   $('div.example .hidden').each(function(){
    $(this).parent().hide();
    });
});

according to your second explanation I have made the following change in-order to accommodate what you seek

$(document).ready(function(){
    var count = 0;
    $('div.example .hidden').each(function(){ //take the count of hidden span tags
    count++;
    });
    $('div.example').children().each(function(){
     if($('div.example').children().length==count){  // check whether the count of hidden span tag element length is equal to all the child element length
       $('div.example .hidden').parent().hide();
       }else{
           //alert('There is an visible element');
            }
    });
});

This also hides the parent if even one child span is hidden, so it did not work. — teeray, Apr 23 '13 at 00:58

cwebbdesign · Answer 3 · 2013-04-24T07:22:35.630

0

This answer assumes that as stated in your example you are looking for the case when all 3 elements of the .example parent container have the .hidden class.

var childElements = $('.example .hidden');

if (childElements.length === 3) {
    $('.example').hide();
}

*update: the first example only works in the case that there is only one '.example' element. The following example loops through each '.example' element individually.

var parents = $('.example');

// Loop through each parent element, finding only it's childeren
parents.each(function(index, item) {

    var $item = $(item),
        childElements = $item.find('.hidden');

    if (childElements.length === 3) {
        $item.hide();
    }
});

edited Apr 24 '13 at 07:22

answered Apr 21 '13 at 17:10

cwebbdesign

41
3

This is the closest answer as it relates to hiding the parent when all 3 children were hidden, however it doesn't seem to work. – teeray Apr 23 '13 at 00:57
@teeray Sorry, the first example only works when testing one set of elements. I've updated the example to reflect a page with multiple '.example' elements. I can give a jsFiddle link as well if it's helpful. – cwebbdesign Apr 24 '13 at 07:24

score 0 · Answer 4 · answered May 02 '18 at 22:21

This post is super old, but for some reason it popped up in my feed, so I'll still give my two cents:

$('.example').each(function(){
  let $parent = $(this);
  if($parent.find('span').length === $parent.find('span.hidden').length) {
    $parent.hide();
  }
});

Hide parent div if child spans are hidden

4 Answers4