remove parent if no list element has children

Question

On my Website I have a list with different classes which maybe have content or not. If all of them are empty the whole container should be removed, but if one or more have content inside, nothing should happen.

Code Snippets:

<div class="fts">
    <div class="panel-heading">...</div>
    <div class="panel-collapse">
        <div class="panel-body">
            <div class=" bd-layoutbox-16 clearfix">
                <div class="bd-container-inner">            
                    <h5>Heading 5</h5>
                    <div>...</div>
                </div>
            </div>
            <div class=" bd-layoutbox-84 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-31 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-82 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-85 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-86 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-87 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-88 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-89 clearfix">
                <div class="bd-container-inner"></div>
            </div>
            <div class=" bd-layoutbox-90 clearfix">
                <div class="bd-container-inner"></div>
            </div>
        </div>
    </div>
</div>

JS

$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
    .each(function(){
        if($(this).has("h5").length == 0){
            $(this).parent().parent().parent().remove();
        }               
    });

What's the problem?

Thanks for help.

Answer 1

You may need to rework your logic a bit by creating a function, but here's a thought ..

var removethis=1;
$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
    .each(function(){
        if($(this).has("h5").length > 0){
            removethis = 0;
        }               
    });
if (removethis == 1) {
  // remove parent item here
}

Answer 2

You can use contains selector to check any content there or not and then remove it. Below is the code

$('div.fts').each(function() {
  var $this = $(this);
  if ($this.find('div[class*="bd-layoutbox-"] h5').length === 0) {
    $this.remove();
  }
});

Demo: https://jsfiddle.net/6bh0d9yo/1/