In jQuery, there are various methods like – switchClass(), toggleClass(), addClass() and removeClass() by using them you can easily add or removes classes in the elements.
For using switchClass() method you need to include jQuery UI library within your page but you can simply use toggleClass(), addClass() and removeClass() without any dependency other than jQuery.
In this tutorial, I discuss about addClass() and removeClass() method.
Contents
1. .addClass()
This methods adds one or more specified classes to the selector elements.
There are two syntaxes for using this method.
1. Syntax –
$( selector ).addClass( class-name );
In the first syntax, you need to pass your class name within the method.
Note – If you want to add more than one class then pass your class name separated with space in the method. e.g.
$("input[type=text]").addClass( "addborder txt");
Example
In the example, I am adding addborder class to all text element on document ready state.
<!-- CSS -->
<style>
.addborder{
border: 1px solid red;
margin-bottom: 5px;
}
</style>
<!-- Layout -->
<div class='container'>
<input type='text' id='txt1' class='addborder' > <br/>
<input type='text' id='txt2' > <br/>
<input type='text' id='txt3' > <br/>
</div>
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
// Adding addborder class
$('input[type="text"]').addClass('addborder');
});
</script>
2. Syntax –
$( selector ).addClass( function(index, currentClass){
// Statement
return class-name;
});
The second syntax, allows us to return the class name from the function. The function has two parameters –
- index – It contains the current index position of the element from the list.
- currentClass – Existing classes within the element.
Example
<!-- CSS -->
<style>
.addborder{
border: 1px solid red;
margin-bottom: 5px;
}
</style>
<!-- Layout -->
<div class='container'>
<input type='text' id='txt1' class='addborder txt' > <br/>
<input type='text' id='txt2' class='txt' > <br/>
<input type='text' id='txt3' class='txt' > <br/>
<input type='button' id='but_addclass' value='Add class'>
<br/>
<div id='response'></div>
</div>
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
$('#but_addclass').click(function(){
$('input[type="text"]').addClass(function(index,currentClass){
var addClass = "";
if( currentClass != 'addborder' ){
addClass = 'addborder';
$('#response').append('<br/>index : ' + index + ', current : ' + currentClass);
}
return addClass;
});
});
});
</script>
2. .removeClass()
It removes one or more specified class from the selector elements.
There are two syntaxes for using this method.
1. Syntax –
$( selector ).removeClass( class-name );
You need to pass your class name within the method which you want to remove.
Note – Pass your class names separated with space in the method for removing multiple classes. e.g.
$("input[type=text]").removeClass("addborder txt");
Example
The following example removes addborder class from all text element.
<!-- CSS -->
<style>
.addborder{
border: 1px solid red;
margin-bottom: 5px;
}
</style>
<!-- Layout -->
<div class='container'>
<input type='text' id='txt1' class='addborder' > <br/>
<input type='text' id='txt2' class='addborder' > <br/>
<input type='text' id='txt3' class='addborder' > <br/>
</div>
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
// Removing addborder class
$('input[type="text"]').removeClass('addborder');
});
</script>
2. Syntax –
$( selector ).removeClass( function(index, currentClass){
// Statement
return class-name;
});
The second syntax, allow us to return class name from the function. The function has two parameters –
- index – It contains the current index position of the element from the list.
- currentClass – Existing classes within the element.
Example
<!-- CSS -->
<style>
.addborder{
border: 1px solid red;
margin-bottom: 5px;
}
.txt{
padding: 5px;
}
</style>
<!-- Layout -->
<div class='container'>
<input type='text' id='txt1' class='addborder' > <br/>
<input type='text' id='txt2' class='txt' > <br/>
<input type='text' id='txt3' class='addborder' > <br/>
<input type='button' id='but_removeclass' value='Remove class'>
<br/>
<div id='response'></div>
</div>
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
$('#but_removeclass').click(function(){
$('input[type="text"]').removeClass(function(index,currentClass){
var removeClass = "";
if( currentClass == 'addborder' ){
removeClass = 'addborder';
$('#response').append('<br/>index : ' + index + ', current : ' + currentClass);
}
return removeClass;
});
});
});
</script>
3. Using Both methods
Here, is another example where I am using both of the methods.
In the example, I have created an unordered list and on the click of a list item adding an active class and removing from other items.
Completed Code
<!-- CSS -->
<style>
ul{
list-style: none;
}
ul li{
margin-top: 3px;
width: 200px;
}
ul li:hover{
cursor: pointer;
}
.active{
background: cornflowerblue;
color: white;
}
</style>
<!-- Layout -->
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
$('ul li').click(function(){
// Removing class from all list elements
$('ul li').removeClass('active');
// Adding class to clicked list element
$(this).addClass('active');
});
});
</script>
4. Conclusion
The addClass() method does not replace the existing class it simply adds or appends the new class within the element if it is not available.
If you don’t specify any class-name in the removeClass() method then it will remove all classes from the selected element.
If you found this tutorial helpful then don't forget to share.