Checking if the class attribute is empty and then removing it if true with jQuery

Question

I want to remove the class attribute from all elements that have an empty class attribute.

Eg:

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

becomes

<li>One</li>

I have been messing about for ages trying to work it out! The closest I got was

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

But no cigar. I know it's going to be desperately simple but no amount of Googling has show me the light! Cheers.

EDIT: As people have asked why I want to remove it, here is the whole script:

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

The reason there is an empty class is because I am adding the class 'right_col' and then removing it later on. I don't know whether there are going to be other classes or not so that's why I needed to check whether the attribute is empty. Thanks for the help so far!

Answer 1

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

Answer 2

I agree, it's very odd that removeClass leaves an empty class attribute hanging around. I would expect that after an addClass, removeClass would return the DOM to its original state.

What I've ended up doing is:

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

which should be quite performant.

(My code is for an HTML editor, so it's important the code produced is as clean as possible.)

Answer 3

After the document has been parsed and the DOM tree has been created, the element's attributes are really just properties of the individual DOM objects, so while you could remove the attribute from the source, it will still be present (but empty) on each object in the DOM.

Answer 4

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

Answer 5

You don't really need any libraries (like jQuery) do to this:

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

Answer 6

Adding/removing classes is a core function of the jQuery library: http://docs.jquery.com/Attributes

You can see if any given collection of elements has the class in question with hasClass (http://docs.jquery.com/Attributes/hasClass#class)

And then remove a specific class with removeClass (http://docs.jquery.com/Attributes/removeClass#class)

So, if you need to remove class "abc" from a specific element do:

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

This will remove ONLY the indicated class, even if there are others in there. Adding a class works in the same way.

Answer 7

Takes into account empty spaces within the class attribute:

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>

Of course this is a very generalized scenario and some things should be taken into account, such as the use of the querySelectorAll, which should be more specific probably, then searching the whole document for nodes with classes. Second is the transformation of the nodesWithClass HTMLCollection into an Array by using an ES2015 trick (see this question).