How to hide a DIV if content are missing

Question

I have some DIV which has contents that are auto generated by Ektron CMS.

Screenshot of the source:

Output:

Each parent DIV ({letter}Serv) is empty if the DIV class justPad doesn't appear at least once. So based on the screenshots, A and C has content but B and D doesn't.

How can I hide the {letter}Serv DIV if there is no content inside it?

I have the following class that I can apply:

.hideDiv {
     display: none;
}

Sample code:

<div id="nServ" class="serviceHolder hidOverflow percPadBottom letterCode">
    <h2 class="defaultBlue percPadBottom">N</h2>
        <span id="ctl00_BodyPlaceHolder_Collection15">
        <a href="#ViewEditorsMenu" data-ektron-editorsmenu-id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" onclick="return false;" class="EktronEditorsMenuMarker"><img src="/WorkArea/images/application/pin_grey.gif" alt="Editor's Menu" title="Editor's Menu" /></a>
        <ul id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" class="EktronEditorsMenu" style="display:none;">
            {CONTENTS}
        </ul>
        <div class="justPad"><a class="defaultLinks" href="link">Nephrology</a></div>
        <div class="justPad"><a class="defaultLinks" href="link">Neurology</a></div>
        <div class="justPad"><a class="defaultLinks" href="link">Nutrition</a></div>
    </span>
</div>

<div id="bServ" class="serviceHolder hidOverflow percPadBottom letterCode">
    <h2 class="defaultBlue percPadBottom">B</h2>
        <span id="ctl00_BodyPlaceHolder_Collection15">
        <a href="#ViewEditorsMenu" data-ektron-editorsmenu-id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" onclick="return false;" class="EktronEditorsMenuMarker"><img src="/WorkArea/images/application/pin_grey.gif" alt="Editor's Menu" title="Editor's Menu" /></a>
        <ul id="EktronEditorsMenu3c275505-4a2c-4384-bf36-081bc3e69279" class="EktronEditorsMenu" style="display:none;">
            {CONTENTS}
        </ul>
    </span>
</div>

Jovanjove

div:empty {display:none} you can check if div is empty – Flagging

That would work except the DIV will have other content inside it. I only want to hide it if justPad DIV isn't present at least once. – Jovanjove

I guess this doesnt work because his div isnt actually empty – Ribbon

Just get childElements of the parent div. Loop through the child elements if any are justPad then don't hide if none are justPad then hide using display:none. – Surrounding

Please add the code itself, and not just a screenshot. This isn't just easier for us to search for keywords, but will also be more useful for future users with similar issues. – Barrington

@DarkAshelin Good point. I will do it. Thanks. – Jovanjove

Answer 1

This should find all of your empty Divs and hide them.

$('div.serviceHolder:not(:has(div.justPad))').hide()

Thunell

Thank you, does that mean you'll accept it as the correct answer? – Thunell

Yes but I can't yet :/ Thank you also! – Jovanjove

Answer 2

Loop through each div and looks for children length, if null .hide() the div:

$('.hidOverflow').each(function() {
    var $this = $(this),
        $items = $this.children('.justPad'),
        itemAmount = $items.length;

    if(itemAmount <= 0) {
        $this.hide();
        // or if you want to use your CSS-class
        $this.addClass('hideDiv');
    }
});

edit: Added version where we are using your CSS-class instead of the .hide()-function.

Heterochromatin

Probably want to iterate over all .serviceHolder – Ribbon

Yeah, maybe. Best case would be to have a specific class just for this loop, like "js-hide-if-empty" or along those lines. – Heterochromatin

@Heterochromatin Thanks for the code and it works but I went with @ Shrikke's solution as it's simpler and works with just one line. This also worked for anyone who might be interested. I up voted your answer – Jovanjove

Answer 3

try the following

$(document).ready(function(){
$("div[id$=Serv]").each(function(){
        if($(this).is(':empty')){
            $(this).hide();
        }
        else{
            $(this).show();
        }
});
});

Hope it helps ....

Addend

Thanks for the code and it works but I went with @ Shrikke's solution as it's simpler and works with just one line. This also worked for anyone who might be interested. I up voted your answer – Jovanjove