如果列表元素沒有子元素，則刪除父元素

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/