hide parent div if 2 child divs are present?

Question

I have a parent div and 2 nested child divs. I want to hide the first child div and the parent div when the second child div doesn't contain any content.I was wondering how this could be done?

The reason I have 2 child divs is because I am creating a responsive website, so one is to fully extend the content, the second one is to centre the content in the middle of the page and the third is to house the content that is contained within.

      <div id="portfolio"><!--portfolio-->
        <div id="portfolio-works"><!--portfolio-works-->
            <div class="portfolio-works-container"><!--portfolio-works-container-->


          </div><!--/portfolio-works-container-->
        </div><!--/portfolio-works-->
   </div><!--/portfoio-->

Try the solutions here: http://stackoverflow.com/questions/1992114/how-do-you-create-a-hidden-div-that-doesnt-create-a-line-break-or-horizontal-sp — Matthijs, May 02 '14 at 06:55
PollyGeek - When it is empty. In the above code there is content present, but if that weren't there then I would like the first child div and the parent div to disappear. — user3345367, May 02 '14 at 06:58

score 1 · Answer 1 · answered May 02 '14 at 06:59

1

Try this:

$('.portfolio-works-container').each(function() {
    if($(this).find('.portfolio-img').children().length > 0) {
        $(this).hide();
    }
});

answered May 02 '14 at 06:59

Felix

37,892
8
43
55

score 0 · Answer 2 · answered May 02 '14 at 06:59

You can check if the element is completely empty using empty selector, but empty means no white space at all. If there's a chance that there will be white space, then you can use $.trim() and check the length of the content; then get the its sibling and hide it.

Demo code:

$('.portfolio-img:empty').siblings('.portfolio-text').hide();

if (!$.trim( $('.portfolio-img').html() ).length){
    $('.portfolio-img').siblings('.portfolio-text').hide();
}

Demo: http://jsfiddle.net/Sf8aH/

It will be easier if you can set display:none on the element instead of check its content.

score 0 · Answer 3 · answered May 02 '14 at 07:17

if that will be your HTML structure then it's somewhat easy to achieve:

jQuery(document).ready(function(){
    var divGroup = jQuery('.portfolio-works-container > div:nth-child(2)');
    if( divGroup.html() == '' ) {
        divGroup.parent().toggle();
    }
});

jsFiddle Example: http://jsfiddle.net/laelitenetwork/88DMt/2/

Cheers.

hide parent div if 2 child divs are present?

3 Answers3