使用jQuery检查类属性是否为空，如果为空则将其删除

Question

我想要删除所有空class属性的元素上的class属性。

例如：

`<li class="">One</li>`

变成

<li>One</li>

我已经花费很长时间来尝试解决它了！我最接近的结果是

var len = $(".splitcolcontainer ul li[class]").val().length;
 if (len == 0)
  {
  $('.splitcolcontainer ul li').removeAttr("class");
  }

但是还差一点。我知道这个问题可能非常简单，但无论我如何Google都找不到答案。谢谢。

编辑：由于有人问为什么我想要删除它，这是整个脚本：

$(document).ready(function() {
     $( '.splitcolcontainer ol, .splitcolcontainer ul').each(function() {
          if($(this).is("ol")) { var ordered = true; }
          var colsize = Math.round($(this).find("li").size() / 2);
          $(this).find("li").each(function(i) {
               if (i>=colsize) {
                    $(this).addClass('right_col');
               }
            });
          if(ordered) {
               $(this).find('.right_col').insertAfter(this).wrapAll("<ol class='splitcol' start='" + (colsize+1) + "'></ol>").removeClass("right_col");

          } else {
                $(this).find('.right_col').insertAfter(this).wrapAll("<ul class='splitcol'></ul>").removeClass("right_col");            
            }

     });


    $('.splitcolcontainer').after('<div class="clear">&#160;</div>');
    $('.splitcolcontainer ul, .splitcolcontainer ol').wrap('<div></div>');
});

之所以有一个空的类是因为我先添加类“right_col”，然后稍后又删除它。我不知道是否会有其他类，因此需要检查属性是否为空。到目前为止，感谢您的帮助！

- Glo

---

也许告诉我们“为什么”你想要移除这个属性会很有用？ - cdeszaq

Cdeszaq 是正确的，问题的措辞让我们想知道是否有更好的方式来解决问题。如果不知道问题，我们无法回答。 - Peter J

已添加整个脚本供参考，谢谢！ - Glo

Answer 1

$('*[class=""]').removeAttr('class');

- David Hedlund

Answer 2

我同意，removeClass 留下一个空的 class 属性是非常奇怪的。我期望在执行 addClass 和 removeClass 后，DOM 应该恢复到原始状态。

我的解决方法是：

$(this).removeClass("my-class").filter('[class=""]').removeAttr('class');

这应该具有相当高的性能。

(我的代码是为HTML编辑器而设计的，因此生成的代码尽可能清晰非常重要。)

- CurtainDog

Answer 3

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

- David Hellsing

Answer 4

在文档解析完成并创建 DOM 树之后，元素的属性实际上只是各个 DOM 对象的属性。因此，尽管您可以从源中删除属性，但它仍然存在于 DOM 中每个对象上（但是为空）。

- cdeszaq

---

是的，你让我意识到额外的jQuery有点毫无意义，为了删除属性而增加的毫秒数并不值得页面加载时间的延长。哦，好吧，最终我的问题有点毫无意义，抱歉:S - Glo

Answer 5

添加/删除类是jQuery库的核心功能：http://docs.jquery.com/Attributes

您可以使用hasClass(http://docs.jquery.com/Attributes/hasClass#class)查看任何给定元素集合是否具有相关类。

然后，使用removeClass(http://docs.jquery.com/Attributes/removeClass#class)删除特定类。

因此，如果您需要从特定元素中删除类“abc”，请执行以下操作：

$("#element").removeClass("abc");

这将仅删除指定的类，即使其中有其他类也是如此。添加类的方式也是相同的。

- cdeszaq

---

我想要删除的是类属性，而不仅仅是一个类，并且只有在没有其他类的情况下才能删除。 - Glo

但为什么呢？一个空的类属性不会有任何作用。 - cdeszaq

更干净的HTML，我猜吧，虽然这并不重要，但至少我知道以后可以参考！ - Glo

但是HTML仅用于解析DOM树。之后，HTML不会被JavaScript编辑，只有DOM树本身。如果它确实编辑了HTML，则必须重新解析DOM，这将导致主要减速。由于空类属性不会造成任何损害，除非您有一个需要其他东西的额外内存的大型页面，否则我不建议删除它，因为删除属性所需的时间会使您的页面略微变慢，并且没有真正的好处。 - cdeszaq

是的，我可能会保留这些属性，感谢解释。 - Glo

Answer 6

你实际上不需要任何库（如jQuery）来完成这个操作：

if (element.className == "")
    element.removeAttribute('class');

- Iain Collins

Answer 7

考虑 class 属性中的空格：

var nodesWithClass = document.querySelectorAll("[class]");

[...nodesWithClass].forEach(node => {
  if( !node.className.trim() )
    node.removeAttribute('class');
})


console.log( document.body.children );

<a class="">one</a>
<a class=' '>two</a>
<a class='    '>three</a>

当然，这只是一个非常概括的场景，需要考虑一些因素，例如使用querySelectorAll，可能应该更具体地搜索带类的节点，而不是在整个文档中搜索。其次是通过使用ES2015技巧（请参见this question）将nodesWithClassHTMLCollection转换为数组。

- vsync