In this guide, you will be aware of two methods/functions of Jquery with examples that are - 1. removeClass() and 2. addClass().
| Table of Contents |
|---|
| | Remove class in Jquery | Add the class in Jquery | Remove class and add new in Jquery |
removeClass() method is used in Jquery to remove a class from HTML element.
addClass() method is used to add a class to the Html element in Jquery. If you want to add any new class name in the existing class (without replacing previous), then also this method is useful.
removeClass() function example-
Give a class name in the removeClass() method's parameter which you want to remove from the element.
<!DOCTYPE html>
<html>
<head>
<title>How To Remove class in Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1>
<center><button id="btn">Remove Class</button></center>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#icon").removeClass("fa fa-home");
});
});
</script>
</body>
</html>addClass() function example-
You do not need to set any empty class like class="" on the Html element. The addClass() method automatically creates a class and set its value, you gave in addClass() function's parenthesis.
<!DOCTYPE html>
<html>
<head>
<title>How To add class in Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i id="icon"></i></h1>
<center><button id="btn">Add Class</button></center>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#icon").addClass("fa fa-home");
});
});
</script>
</body>
</html>The addClass() function doesn't replace previous class.
But, for example, when you set a class="fa" in i tag like this <i class="fa"></i> and then you add a class through addClass("fa-home"). Then i tag structure will be <i class="fa fa-home"></i>.
Both classes previous and added by the jquery method have been applied to the element.
Now, if you execute the jquery code then addClass("fa-home") method will find that this class name (in its parameter) is set on the element (on the previous execution). Then it will replace the same class fa-home class from i tag.
In simple words, If the class name in addClass methods parenthesis matches the part of the class of i tag then matched class in the element will be replaced with addClass() methods class.
Practice this example and see element by inspecting
<!DOCTYPE html>
<html>
<head>
<title>How To add class in Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa" id="icon"></i></h1>
<center><button id="btn">Add Class</button></center>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#icon").addClass("fa-home");
});
});
</script>
</body>
</html>Remove Class & Add another Class
<!DOCTYPE html>
<html>
<head>
<title>How To add class in Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1>
<center><button id="btn">Add New Class</button></center>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#icon").removeClass("fa fa-home");
$("#icon").addClass("fa fa-gear");
});
});
</script>
</body>
</html>| # Change the class name in JS # Introduction to SQL # PHP implode() # PHP print_r() # PHP sizeOf() |
Publish A Comment