How to remove/change dynamically created CSS class in JavaScript

Question

Background,

There are some elements where CSS animations needs to be applied. However these CSS needs to be generated on the fly as calculation needs to be done from JavaScript code.

This question clarifies how to dynamically add a CSS. Now the question is, how do I remove or replace a CSS generated following the accepted answer?

Just to be clear, it's nothing to do with removing a class from element. I need to remove it from the page so that animations will stop from elements with class. At some time later I can alter the CSS and re-register class so that associated elements are animated in different way.

Possible duplicate of [Remove CSS class from element with JavaScript (no jQuery)](http://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery) — Pablo Recalde, Feb 10 '17 at 12:41
Not a duplicate, this is not about removing CSS from element, but removing class from the page. — Low Flying Pelican, Feb 10 '17 at 12:52
Then explain yourself better, coz based on the 4 answers that are stating how to remove the class from the element it seems that's what you're asking. — Pablo Recalde, Feb 10 '17 at 12:55
Okay then so Possible duplicate of [How to change/remove css classes definitions at runtime](http://stackoverflow.com/questions/730048/how-to-change-remove-css-classes-definitions-at-runtime) — Pablo Recalde, Feb 10 '17 at 12:56
Not really, the that question talks about class in a stylesheet. This one is class added dynamically. — Low Flying Pelican, Feb 10 '17 at 12:58
It shouldn't matter as any class would be in that DOM structure — Pablo Recalde, Feb 10 '17 at 12:59
I think that the link on the answer has enough information for you to achieve what you're trying — Pablo Recalde, Feb 10 '17 at 13:00
Well the answer referring to 'document.styleSheets[i].cssRules' but this class is not inside a stylesheet, which is why I asked the question in the first place — Low Flying Pelican, Feb 10 '17 at 13:02

score 1 · Answer 1 · answered Feb 10 '17 at 12:43

1

document.getElementById('someElementId').className = '';

answered Feb 10 '17 at 12:43

Alexander Nikolaenko

167
10

Thanks for the answer. It removes class from the element, I need to remove the class (added dynamically) from the page – Low Flying Pelican Feb 10 '17 at 13:03

score 0 · Answer 2 · answered Feb 10 '17 at 12:39

0

Edit.

You can remove it from the element's class list

document.getElementById("myelementsid").classList.remove("classname");

answered Feb 10 '17 at 12:39

Pablo Recalde

3,334
1
22
47

If you want to toggle between two class name , use `$(#id_name).toggleClass('class_name1 class_name2');` – KiranPurbey Feb 10 '17 at 12:46
?? I'm answering the OP's question, and without having him to include anything extra (like jQuery that you're using). – Pablo Recalde Feb 10 '17 at 12:48
Thanks for the answer. It removes class from the element, I need to remove the class (added dynamically) from the page – Low Flying Pelican Feb 10 '17 at 13:04

score 0 · Answer 3 · answered Feb 10 '17 at 12:42

0

Here you are full documentation to do it with jQuery https://api.jquery.com/removeclass/ with this, you can remove one or more classes

answered Feb 10 '17 at 12:42

Nenad Jovicic

188
1
7

Thanks for the answer. It removes class from the element, I need to remove the class (added dynamically) from the page. – Low Flying Pelican Feb 10 '17 at 13:00

Afnan Ahmad · Answer 4 · 2017-02-10T12:58:26.010

0

If you want to remove the specific style from the page you can do it like the following snippet:

$('link[title=stylesheettitle]').prop('disabled',true);

OR

$('link[title="stylesheettitle"]').remove();

Java Script

var style = document.getElementById('styleID');
style.parentNode.removeChild(style );

edited Feb 10 '17 at 12:58

answered Feb 10 '17 at 12:44

Afnan Ahmad

2,492
4
24
44

Thanks, but I don't want to change element, I need to remove the class, to stop css animations, and add it after an interval with different parameters (for example animation duration / no of pixels transformed/ etc...), and the class does not reside in a style sheet, it's added dynamically (see the linked question) – Low Flying Pelican Feb 10 '17 at 13:06
@LowFlyingPelican what did you try ? – Afnan Ahmad Feb 10 '17 at 13:12
@LowFlyingPelican this what you are looking for: http://stackoverflow.com/questions/7125453/modifying-css-class-property-values-on-the-fly-with-javascript-jquery – Afnan Ahmad Feb 10 '17 at 13:21

How to remove/change dynamically created CSS class in JavaScript

4 Answers4