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

Contents

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.

Also Read This 👉 Testimonial slider jquery example

jQuery Add and Remove CSS Classes

Related posts: