CODEWITHSUNDEEP
javascriptjquery
Raman
Raman

Reputation: 2003

Add and remove multiple classes in jQuery

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]]");
}

Upvotes: 180

Views: 213064

Answers (5)

Junaid
Junaid

Reputation: 4926

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>

Upvotes: 3

Dr Bali
Dr Bali

Reputation: 11

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

Upvotes: 0

Prais
Prais

Reputation: 969

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");

Upvotes: 23

Headshota
Headshota

Reputation: 21449

You can separate multiple classes with the space:

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

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

Upvotes: 353

Aleksander Rezen
Aleksander Rezen

Reputation: 927

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

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

Upvotes: -1

Related Questions