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) — Pablo Recalde
– Pablo Recalde, Commented Feb 10, 2017 at 12:41
Not a duplicate, this is not about removing CSS from element, but removing class from the page. — Low Flying Pelican
– Low Flying Pelican, Commented Feb 10, 2017 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
– Pablo Recalde, Commented Feb 10, 2017 at 12:55
Okay then so Possible duplicate of How to change/remove css classes definitions at runtime — Pablo Recalde
– Pablo Recalde, Commented Feb 10, 2017 at 12:56

Alexander Nikolaenko · Accepted Answer · 2017-02-10 12:43:25Z

1

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

answered Feb 10, 2017 at 12:43

Alexander Nikolaenko

16710 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Low Flying Pelican Over a year ago

Thanks for the answer. It removes class from the element, I need to remove the class (added dynamically) from the page

Pablo Recalde · Accepted Answer · 2017-02-10 12:39:00Z

0

Edit.

You can remove it from the element's class list

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

answered Feb 10, 2017 at 12:39

Pablo Recalde

3,6251 gold badge28 silver badges52 bronze badges

3 Comments

KiranPurbey Over a year ago

If you want to toggle between two class name , use $(#id_name).toggleClass('class_name1 class_name2');

Pablo Recalde Over a year ago

?? I'm answering the OP's question, and without having him to include anything extra (like jQuery that you're using).

Low Flying Pelican Over a year ago

Thanks for the answer. It removes class from the element, I need to remove the class (added dynamically) from the page

Nenad Jovicic · Accepted Answer · 2017-02-10 12:42:21Z

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, 2017 at 12:42

Nenad Jovicic

1851 silver badge7 bronze badges

1 Comment

Low Flying Pelican Over a year ago

Thanks for the answer. It removes class from the element, I need to remove the class (added dynamically) from the page.

Afnan Ahmad · Accepted Answer · 2017-02-10 12:58:26Z

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, 2017 at 12:58

answered Feb 10, 2017 at 12:44

Afnan Ahmad

2,5424 gold badges28 silver badges46 bronze badges

3 Comments

Low Flying Pelican Over a year ago

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)

Afnan Ahmad Over a year ago

@LowFlyingPelican what did you try ?

Afnan Ahmad Over a year ago

@LowFlyingPelican this what you are looking for: stackoverflow.com/questions/7125453/…

Collectives™ on Stack Overflow

How to remove/change dynamically created CSS class in JavaScript

4 Answers 4

1 Comment

3 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related