Question

我有以下课程：

<div class='prod-item'>
</div>

我可能在DOM中有这个类的多个版本。是否可以遍历每个，并删除没有内部HTML元素的那些？

例如，这可以保留：

<div class='prod-item'>
<p>Pussy</p>
</div>

这应该是：

<div class='prod-item'>
</div>

我有以下不完整的功能，但我不确定如何检查是否存在内部元素：

$('li[class="prod-item"]').each(function() {
    if(){
     this.removeAttribute('class');
   }
});

Answer 1

快速变种：

   $('li[class="prod-item"]').each(function() {
        if($(this).children().length == 0){
         this.removeAttribute('class');
       }
    });

Answer 2

使用html（）语法：

$('li[class="prod-item"]').each(function() {
    if($(this).html().length === 0){
     this.removeAttribute('class');
   }
});

Answer 3

使用 filter() 方法过滤掉所有空div，然后使用 removeClass() 方法删除class。 html内容可以使用 html() 方法，并使用 $.trim() 方法删除尾随和前导空格后检查字符串的长度。

＆＃13;

$('div.prod-item').filter(function() {
  return !$.trim($(this).html()).length;
}).removeClass('prod-item');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='prod-item'>
</div>
<div class='prod-item'>
  <p>Pussy</p>
</div>

<div class='prod-item'>
  <p>Wagon</p>
</div>

＆＃13;

Answer 4

您使用了LI元素而不是div ...

$('.prod-item').each(function() {
   if ($.trim($(this).html())=='') $(this).removeClass('class'); 
});

Answer 5

您可以使用

1）empty选择器：

$('li[class="prod-item"]:empty').removeClass('prod-item');

2）或not has选择器：

$('li[class="prod-item"]:not(:has(*))').removeClass('prod-item');

Answer 6

$(".prod-item").each(function() {
   if($(this).children().length == 0) {
     $(this).remove();
   }
});

没有内部元素时删除类

6 个答案: