Add/remove/replace the class for html element

Question

I'm curious about how can I add/remove class to html element? It seems to be a very simply operation. But it turned out that the method removeClass was not found for some reason.

So what I need to do is replace or remove an old one and add a new one to an element. How can I do that?

There's definitely a jQuery `removeClass()` function. You probably tried to call it on a reference to a DOM node, rather than a jQuery object, though. — Anthony Grist, Apr 17 '13 at 08:22
just point to the exact element and call removeClass() or addClass() in jquery. ref : http://api.jquery.com/removeClass/ — dreamweiver, Apr 17 '13 at 08:23

score 1 · Answer 1 · answered Apr 17 '13 at 08:21

1

Use AddClass to add class, removeClass to remove, toggleClass to toggle (removes class if exists or adds if does not exist) :)

answered Apr 17 '13 at 08:21

karaxuna

25,822
11
76
111

score 1 · Answer 2 · edited May 23 '17 at 12:28

1

If you use jQuery make sure it is loaded before your script and then use like this:

$('p').removeClass('myClass yourClass') // remove class
$("p").addClass("myClass yourClass");   // add class

if you want to use pure JS here you are : How do I add a class to a given element?

var d = document.getElementById("div1");
d.className = d.className + " otherclass";

edited May 23 '17 at 12:28

Community

1
1

answered Apr 17 '13 at 08:21

Mortalus

10,046
9
60
108

1

The pure js version is starting to show its age; more browsers are now supporting [`classList`](https://developer.mozilla.org/en-US/docs/DOM/element.classList). – Ja͢ck Apr 17 '13 at 08:34

score 1 · Accepted Answer · answered Apr 17 '13 at 08:22

1

The removeClass method is included in jQuery, unless you've overridden it.

$("#someElement").removeClass("someclass");

answered Apr 17 '13 at 08:22

Osiris

4,047
2
17
49

score 1 · Answer 4 · answered Apr 17 '13 at 08:23

1

Use addClass and removeClass

<div class="firstClass" id="uniqeId"></div>

$("div#uniqeId").removeClass("firstClass");
$("div#uniqeId").addClass("Some_Other_Class");

answered Apr 17 '13 at 08:23

SachinGutte

6,438
5
32
57

score 1 · Answer 5 · answered Apr 17 '13 at 08:23

1

$('#elementId').addClass('className');
$('#elementId').removeClass('className');

See: http://api.jquery.com/category/manipulation/class-attribute/

answered Apr 17 '13 at 08:23

ferdyh

1,220
2
10
27

score 1 · Answer 6 · answered Apr 17 '13 at 08:26

Since your question is tagged with jquery, there are two functions you can use:

Without jQuery and on modern browsers you can work with the classList property:

element.classList.remove('oldclass')

element.classList.add('newclass')

score 1 · Answer 7 · edited Jun 20 '20 at 09:12

You can use .toggleClass() to add/remove simultaneously, i mean switch from one class to another:

Description from the docs

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

if this is your html:

<div class="aaa">Some text.</div>

then this script:

$('div.aaa').toggleClass('bbb');

will output like this:

<div class="aaa bbb">Some text.</div>

Or if you do this:

$('elem').toggleClass('aaa bbb');
     //--------------------^^^---here this class will be added/removed

Add/remove/replace the class for html element

7 Answers7

Description from the docs