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

remove parent if no list element has children

本文关键字：元素 删除 如果没有 列表元素      更新时间：2023-09-26

在我的网站上，我有一个列表，其中包含不同的类，这些类可能有内容，也可能没有内容。如果它们都是空的，则应删除整个容器，但如果一个或多个容器内有内容，则不应发生任何事情。

代码片段：

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

怎么了？

感谢您的帮助。

您可能需要通过创建一个函数来稍微修改您的逻辑，但这里有一个想法......

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
}

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

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

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

相关文章：