[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', '');


Related Searches to How to remove all CSS classes using jQuery ? - javascript tutorial