0

To remove the class, I use

getElementsByClassName("myclass1")[i].classList.remove("myclass2")

based on HTML5 Techniques. (I know that's not for IE9-, that's for browsers only).

As far as I know it is absolutely fine do not check if class exists. Right?

However, in my case there are many items with myclass1 on the page where I want to remove myclass2, but most of them (let's say 90%) do not have myclass2.

Will checking if the class myclass2 exists will help to increase the performance as checking if exists could be much faster than delete? (still not sure about my last statement)

What would you do in my case?

Thank you.

Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • One question you should ask yourself: Is the way the code works now (by attempting to remove regardless of existence of the class) a performance bottleneck? If not, then this might be a case of [premature](http://programmers.stackexchange.com/q/80084/82853) [optimization](http://stackoverflow.com/q/385506/1883647) (there are two helpful links there). – ajp15243 Feb 26 '14 at 15:04
  • the classList.remove("myclass2") also needs to check if it exists before it can remove it (it needs to find it, anyway). In fact, if you check if it exists yourself and it does, then call .remove("myclass2") it will check a second time. So it might actually be slower to add that check :) – Daniël Knippers Feb 26 '14 at 15:06
  • @Daniël Knippers Right, but that's in case if there are many myclass2 on the page. However, in my case about 90% do not have it, but I have to pass through all elements to check and remove them. So that doesn't slower too much, but I could win more with checking if exists. – Haradzieniec Feb 26 '14 at 15:08
  • Maybe I don't understand it properly. But what I got was you have a set of elements, having class `myclass1` (and maybe `myclass2`). You want to remove `myclass2` from those elements. You asked if it is faster to first check, for each element, if it has `myclass2` before you call `.remove("myclass2")`. I responded by saying the `.remove("myclass2")` already includes that check, so it's probably just slower :) Let me ask, where / how do you want to 'check if myclass2 exists'? – Daniël Knippers Feb 26 '14 at 15:12
  • @Haradzieniec If your performance worry is getting tons of `myclass1` elements that may or may not have `myclass2`, then instead could you select anything with `myclass2` and filter on ones that also have `myclass1`? This would likely be more performant if you knew `myclass2` was on fewer elements, regardless of the existence of `myclass1` on those elements. However, you really should do some testing (if you haven't already) to see if the current way is acceptable for your usage, as this could all be wasted effort. – ajp15243 Feb 26 '14 at 15:13

2 Answers2

1

As far as I know it is absolutely fine do not check if class exists. Right?

Yes. remove does only remove the tokens it finds.

Will checking if the class myclass2 exists will help to increase the performance as checking if exists could be much faster than delete?

Hardly, because it would be searched twice in the list.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1

getElementsByClassName supports multiple classes, so if you want to streamline it, you can include both "myclass1" and "myclass2" in as parameters and it will return only those elements that have both (see here for more info: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName).

So, in your case, I would recommend using this:

getElementsByClassName("myclass1 myclass2")[i].classList.remove("myclass2")
talemyn
  • 7,822
  • 4
  • 31
  • 52
  • Thank you but in my case that's not a solution as I need to remove myclass2 for all items that have myclass1 AND every n-th myclass1 needs myclass2 and making some calculations. Thank you anyway for your answer as that definitely could be an option for anyone else, it makes sense. – Haradzieniec Feb 26 '14 at 15:52