When removing className, regex or " "?

[everlive]

modalBlock.className = '';
				
modalBlock.className = modalBlock.className.replace( /(?:^|\s)svgModal-in(?!\S)/g , '');

Tried both, they do the exact same thing and I am not replacing anything.

Or should I just use:

modalBlock.removeAttribute("class");

Does it matter?

[felgall]

@everlive

Does it matter?

It does if there is more than one class on the element. setting className to ‘’ removes all the classes whereas a regexp can remove one while still leaving the others there.

Try the tag
<span class="something svgModal-in somethingelse">
and you will soon see the difference.

[everlive]

That is what I was thinking, I did that with a bit of code earlier but I was referring to a single selector situation since no one would be able to edit this bit of HTML and whether or not it is worth the extra bytes?

The whole code is generated via createElement with subsequent setAttribute, classNmae, etc, etc.

[Mittineague]

I imagine any differences in resource use would be negligible, but …

If you are using script to add the element with a class attribute and it will always only ever have one value, regex seems a bit over-kill.

I don’t think that having the script either removing it or setting it to empty would make much difference in terms of “saving bytes”.

I think browsers may “save” attributes so they can be used for CSS and / or JavaScript.
In which case an empty attribute would be wasteful. Wasteful enough to make a noticeable difference? Likely not. But for me I’d prefer to not have them be there at all rather than be there for no use.

[Jeff_Mott]

Even better may be the newer classList property.

// example
div.classList.remove("foo");
div.classList.add("anotherclass");