Home
CSS
HTML

Remove All CSS Class Using jQuery

remove css from div control using jquery, clear Css from control using jquery, remove all css from control jquery from html, asp.net core mvc, PHP.
Vinay Singh
In this article I will show you using jQuery how to remove CSS class from a div control. This you can apply for all HTML controls like textbox, button, radio button, checkbox, listbox and many more. This code you can user on your html, .cshtml, .aspx , razor page or in you asp.net core mvc application. 

What is jQuery?

jQuery is a client side script. It is a library not a programming language same as JavaScript. jQuery comes with multiple ready to use feature like ajax, managing controls and many more.  It very lightweight and easy to user.

How to style CSS to DIV control?

For applying CSS to a div control first we need to write a CSS class. Here I have written a CSS class which make div control in square shape, make the control text bold with blue background color. For this you need to write a CSS.

.divstyle{
    background-color:blue;
	color:yellow;
	width:200px;
	height:200px;
	text-align:center;
	font-size:20px;
	font:bold;
}

Now we will apply CSS to class code to Div control.

<div class="divstyle" id="divContent">This is test for style</div>

In above code i have used class attribute to apply the css class. This approach to apply CSS you can use in your asp.net, .net core mvc or html or in you PHP application.  

remove-all-css-class-using-jquery

So to perform remove css class first we need to download the jQuery library. Please refer the below link to download the jQuery library.

Download jQuery Library To download the jQuery library refer the download link.

Now you need to add the jQuery library reference in the header of your page as mentioned below. 
 <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  After adding jQuery library reference you need to add the below mention html code or you Dom control in the body of the page. Below code represent a control in HTML file
<div class="divstyle" id="divContent">This is test for style</div>
<br/>
<input type="button" value="Clear CSS"  onclick="javascript:RemoveClassOnControl();"/>
Above code I have a div control which is having CS style and a button control which is having a click event to tiger a function.  Here is you script which will remove CSS class.  We user jQuery inbuild function to remove the CSS class.
var RemoveClassOnControl=function(){	
	$("#divContent").removeClass();
}

How To Remove or Clear CSS on Button Click using jQuery?

Here is the complete code.
<html>
<head>
<title>jQuery Check If Element / Control Not Exists</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
.divstyle{
    background-color:blue;
	color:yellow;
	width:200px;
	height:200px;
	text-align:center;
	font-size:20px;
	font:bold;
}
</style>
<script> 
var RemoveClassOnControl=function(){	
	$("#divContent").removeClass();
}
</script>
</head>
<body>
	<div class="divstyle" id="divContent">This is test for style</div>
	<br/>
	<input type="button" value="Clear CSS"  onclick="javascript:RemoveClassOnControl();"/><br/>
</body>
</html>
Run the above code by placing you code and check the output. Ones you click on the button you screen will become as shown below.


remove-all-css-class-using-jquery

Post a Comment