Today, We want to share with you remove class jquery.In this post we will show you remove class javascript, hear for How to use removeClass() method in jQuery? we will give you demo and example for implement.In this post, we will learn about jquery remove class with an example.
jQuery Add and Remove CSS Classes
The removeClass() method is used to remove one, multiple, or all the class names from the class attributes of the matched elements.
Example 1: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing Classes from the Elements in jQuery - www.pakainfo.com</title>
<style>
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
.hint{
font-style: italic;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").removeClass("page-header");
$("p").removeClass("hint highlight");
});
});
</script>
</head>
<body>
<h1 class="page-header">Demo Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Remove Class</button>
</body>
</html>
Example 2: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing All the Classes from the Elements in jQuery - www.pakainfo.com</title>
<style>
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
.hint{
font-style: italic;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").removeClass();
$("p").removeClass();
});
});
</script>
</head>
<body>
<h1 class="page-header">Demo Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Remove Class</button>
</body>
</html>
I hope you get an idea about jquery add remove class onclick.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโt forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.