Question 269477 in Html Question posted in
Some basic documentation can be found here.

Is there any reason why the "class" attribute stays in an HTML tag even after removing last class via classList.remove?

If I execute the following snippet,

s = document.createElement('span');
console.log(s)
s.classList.add('foo');
console.log(s)
s.classList.remove('foo');
console.log(s)

I get this output:

<span></span>
<span class="foo"></span>
<span class></span>

Why is class still there in the 3rd line? Does it serve any purpose? Or can I just consider it absent?

Tags:

3

Answers


  1. 0

    classList property is used to manipulate the class names within the class attribute, but the attribute itself will still exist. To remove the class attribute itself, you can use the removeAttribute()

    s = document.createElement('span');
console.log(s)

s.classList.add('foo');
console.log(s)

s.removeAttribute('class');
console.log(s)
    Login or Signup to reply.
  2. 0

    The class attribute is always present in HTML elements, even if it doesn’t have any CSS class assigned to it.

    In HTML, an element can have a class attribute without any specific classes assigned to it. When you use classList.remove('foo'), you are removing the specific class foo from the list of classes associated with the element. However, the class attribute itself remains, though without any classes.

    This behavior is part of how the HTML specification works, and it’s perfectly normal. The class attribute can be used to add multiple classes to an element, so even if you remove all classes from it, the attribute itself remains to allow you to add more classes later if needed. Though it doesn’t serve any specific purpose in this case, but it’s there to maintain the structure of the HTML element.

    Login or Signup to reply.
  3. 0

    Does it serve any purpose?

    It is an attribute with no value. No more, no less. It is not really "special". It obeys the normal rules and for example can be matched by an attribute selector

    [class] {
  font-size: 2em;
}

[class="foo"] {
  text-decoration: underline;
}

.foo {
  color: red;
}
    <span>
  A
</span>

<span class>
  B
</span>

<span class="foo">
  C
</span>

    Or can I just consider it absent?

    The presence of a valueless class attribute does not do anything by itself. While it is possible that someone wrote a selector that only uses its presence:

    1. It would depend on the particular HTML + CSS/JavaScript application. Having an attribute selector for "anything with class" is not a universal thing.
    2. Even if present it would be rare. In the overwhelming majority of times one would want to use a particular class value. Just the presence or absence of the attribute is not typically worth focusing on.

    So, overall it is possible in theory that <span> and <span class> would behave differently. However, it is very unlikely that they would. Depending on what the code is trying to do with those it might be safe to consider them equivalent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search