CSS METHODS - removeClass()

The removeClass() method in JQuery is used to insert a class/classes to an element.

Example :

<html>
    <head>
    	<title> My First Programme </title>
  	</head>

	<style>
    	.myClass {
        	background-color: violet;
        }
    </style>
    
  	<body>
    	<h1> JQuery </h1>
    	<p class = "myClass">New Code</p>
    	
    	<button> Click Here </button>
    	
      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('p').removeClass("myClass");
			});
			
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have a <p> element, with the class 'myClass',

<p class = "myClass">New Code</p>

Which is defined in a CSS style property,

<style>
	.myClass {
		background-color: violet;
	}
</style>

Now, all we are going to do is, remove the class using the 'removeClass()' method.

And we have achieved it using the JQuery statement,

$('button').click( function() {
	$('p').removeClass("myClass");
});

All we are doing is, using the 'removeClass()' method on the <p> element, to remove the class 'myClass' from the <p> element.

$('p').removeClass("myClass");

And initially, we had the background-color of the <p> element as violet(Since violet is the 'background-color' defined in the class 'myClass').

And on click, the class 'myClass' is removed, removing the background-color.

❮❮ PREV NEXT ❯❯