How To Hide A DIV If Content Are Missing

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

Solution 1:

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

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

Solution 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.

Solution 3:

try the following

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

Hope it helps ....