如果列表元素没有子元素，则删除父元素

Question

在我的网站上，我有一个包含不同类别的列表，这些类别可能有内容也可能没有内容。 如果所有容器都为空，则应删除整个容器，但是如果其中一个或多个容器中有内容，则什么也不会发生。

代码段：

<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();
        }               
    });

有什么问题？

感谢帮助。

Answer 1

您可能需要通过创建函数来稍微修改一下逻辑，但这是一个想法。

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

您可以使用包含选择器来检查是否存在任何内容，然后将其删除。 下面是代码

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

演示： https : //jsfiddle.net/6bh0d9yo/1/