To add and remove a CSS class with JQuery is done with the addClass and removeClass methods.
Let us start by adding a class to an HTML element:
If you later want to remove the class again, use the removeClass method like done below:
var e = document.getElementById("unique_id_of_element"); e.className += " name_of_class_to_be_added"; e.className = ""; /* Reset the class-list (remove classes) */
var e = document.getElementById("unique_id_of_element"); e.className += " name_of_class_to_be_added";
To remove the class, you can simply set it back to its original state. That is, if there were any classes already present, you will need to list those. For example:
e.className = "some_class another_class";
There is also another way of doing it, but it is not supported in Internet Explorer 10. The browser is, however, very old (from 2012), so we should not support it. Tell users to switch to another browser, or upgrade their systems.
var element = document.getElementById("unique_id_of_element"); e.classList.add("new_class"); e.classList.remove("new_class");