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

时间:2016-02-08 16:08:59

标签: javascript jquery

在我的网站上,我有一个列表,其中包含可能包含或不包含的不同类别。如果所有这些都是空的,那么整个容器应该被移除,但是如果一个或多个容器里面有内容,则不会发生任何事情。

代码段:

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

问题是什么?

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

你可能需要通过创建一个函数来重新修改你的逻辑,但这是一个想法..

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
}

答案 1 :(得分:0)

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

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

演示:arguments