Add and remove multiple classes in jQuery

Question

I'm trying to add and remove multiple classes on a text field by clicking different radio buttons. I'm not able to remove the unwanted classes while switching between different radio buttons.

My code for this is:

// For 1st radio button if (actionUrl == "search-client-by-id") { $("#req").removeClass("validate[required,custom[onlyLetterNumber],maxSize[20],custom[onlyLetterSp]]") .addClass("validate[required,custom[onlyNumberSp]]"); } // For 2nd radio button else if (actionUrl == "search-client-by-name") { $("#req").removeClass("validate[required,custom[onlyNumberSp]]") .addClass("validate[required,custom[onlyLetterNumber],maxSize[20],custom[onlyLetterSp]]"); }

simhumileco · Accepted Answer · 2019-10-03 20:30:03Z

355

You can separate multiple classes with the space:

$("p").addClass("myClass yourClass");

http://api.jquery.com/addClass/

edited Oct 3, 2019 at 20:30

simhumileco

35.3k18 gold badges148 silver badges125 bronze badges

answered Aug 25, 2011 at 5:57

Headshota

21.4k13 gold badges63 silver badges82 bronze badges

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

2 Comments

Raman Over a year ago

I have found a solution for this, every time I use .removeClass() only and no need to write any class name in removeClass to remove all the added classes and add any class by choice. Yes its working...!

Ahmet Over a year ago

Using .removeClass() [with no parameters] removes all classes of the jQuery object.

simhumileco · Accepted Answer · 2019-10-03 20:31:17Z

Add multiple classes:

$("p").addClass("class1 class2 class3");

or in cascade:

$("p").addClass("class1").addClass("class2").addClass("class3");

Very similar also to remove more classes:

$("p").removeClass("class1 class2 class3");

or in cascade:

$("p").removeClass("class1").removeClass("class2").removeClass("class3");

so what is you want to remove a class from multiple $("p")?
in my example I refer to all the paragraphs on the page but it is just an example. You can identify a specific item with an ID or another class.

Junaid · Accepted Answer · 2021-09-30 09:44:56Z

TL;DR

$("p").removeClass('one four').addClass("three one"); // FYI: Order of addClass & removeClass can be changed too & chaining is also possible, e.g $("p").addClass("three one").removeClass('one four').addClass('class1 class2 class3');`

More Working examples & details.

// handle button click & add/remove classes $("#myBtn").click(function() { $("#myPara").addClass("three four").removeClass('two three'); // again show the classes applied after we addede/remove multiple classes $("#container").text($("#myPara").attr("class")); });

.one { color: red; } .two { text-decoration: underline; } .three { font-style: bold; } .four { font-style: italic; }

<p id="myPara" class="one two three">hello world</p> <p> Classes applied: <b><span id='container'>one two three</span></b></p> <button id="myBtn">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Dr Bali · Accepted Answer · 2021-09-29 14:24:22Z

0

use this $("p").addClass("class1 class2 class3");

answered Sep 29, 2021 at 14:24

Dr Bali

11

1 Comment

Eric Aya Over a year ago

This has already been mentioned in the other answers. When answering older questions that already have answers, please make sure you provide either a novel solution or a significantly better explanation than existing answers.

Punit Gajjar · Accepted Answer · 2017-04-17 07:44:42Z

-1

easiest way to append class name using javascript. It can be useful when .siblings() are misbehaving.

document.getElementById('myId').className += ' active';

edited Apr 17, 2017 at 7:44

Punit Gajjar

5,0077 gold badges39 silver badges73 bronze badges

answered May 31, 2016 at 1:47

Aleksander Rezen

9278 silver badges14 bronze badges

2 Comments

cyberbit Over a year ago

This answer is not relevant to the question, which asked explicitly for jQuery.

user6269864 Over a year ago

And you should use classList anyway

Collectives™ on Stack Overflow

Add and remove multiple classes in jQuery

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

2 Comments

Linked

Related