[Solved-5 Solutions]How to remove all CSS classes using jQuery ? - javascript tutorial
Problem :
How to remove all CSS classes using jQuery ?
Solution 1:
You can run the following code to remove all CSS classes using jQuery:
<html>
<head>
<title>jQuery Selector - Wikitechy Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function(){
$("p").removeClass();
});
});
</script>
<style>
.green { color:green; }
.pink { color:pink; }
</style>
</head>
<body>
<p class = "green" >This is first paragraph.</p>
<p class = "pink">This is second paragraph.</p>
<button id="button1">Remove</button>
</body>
</html>
Solution 2:
$("#item").removeClass();
Calling the function removeClass with no parameters will remove all of the item's classes.
We can also use this code :
$("#item").removeAttr('class');
$("#item").attr('class', '');
$('#item')[0].className = '';
If we didn't have jQuery, this would be only option:
document.getElementById('item').className = '';
Solution 3:
Just set the className attribute of the DOM element to ''.
$('#item')[0].className = ''; // the real DOM element is at [0]
You can use removeClass().
$("#item").removeClass();
Solution 4:
This is one of the solution:
$('#item')[0].className = '';
// or
document.getElementById('item').className = '';
Solution 5:
You can try this:
$('#item').removeAttr('class').attr('class', '');