How to hide panel-body is empty?

Question

I want to hide panel-body if it is empty.

Here's the example: BootPly

Code Javascript:

$(function() {
    $('#container').load(function() {
        if($.trim($(this).contents().find("container").find('panel-body').length) == 0) {
            $(this).hide();
        }
    }); 

Code HTML:

<div class="container">
    <div class="row clearfix">
        <div class="col-md-9 column">
            <div class="panel panel-primary">
                <div class="panel-heading">Content</div>
                <div class="panel-body fixed-panel">
                    <div class="form-group">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

How about something like this? http://www.bootply.com/bKb0isdzKA

$(function() {
    $('.form-group').each(function() {
        if ($(this).is(':empty')) {
            $(this).closest('.container').hide();
        }
    });
});

You had a few issues. For one, you were using #container as your selector, despite container being a class . Additionally, you were checking to see if body-panel was empty, but it contained a child div, so it would always have HTML content.

The code above will loop through each .form-group and hide the parent container if it's empty.

If this isn't exactly what you had in mind, let me know and I can make adjustments.