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

user_249950 0
Viewed 17094

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!

jquery
7 Answers
$('*[class=""]').removeAttr('class');
user_1338020

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.

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

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

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

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.

cdeszaq_207700

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).

user_1043800
Related