Home
jQuery

Remove Specific Class from Elements/Control Using jQuery

How to remove specific css class on button click using jQuery. Useful in Asp.Net Core MVC, HTML and PHP for TextBox, Button, Div, Radiobutton.
Vinay Singh
In this article I will show you using jQuery how to remove/clear specific CSS class style from a control or element. This you can apply for all 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. 

In my previous article i have shown you how you can remove css class from a control using jQuery. In this on button click cod will remove all the css class style.

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.

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

In above css code i have created three css class. First one for background, Second one for width of the control and Third one is for styling the font.

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

<div class="background width font" 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="background width font">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 the specific CSS class 'background '.  We user jQuery inbuild function to remove the CSS class.
  var RemoveAllCsssClassOnControl=function(){	
	$("#divContent").removeClass('background');
}

How To Remove Specific Class from Elements/Control By jQuery?

Here is the complete code.
<html>
<head>
<title>jQuery Remove Specific Class from Elements/Control</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
.background{
    background-color:blue;
	color:yellow;
}
.width{
	width:200px;
	height:200px;
}
.font{
	text-align:center;
	font-size:20px;
	font:bold;
}
</style>
<script> 
var RemoveAllCsssClassOnControl=function(){	
	$("#divContent").removeClass('background');
}
</script>
</head>
<body>
	<div class="background width font" id="divContent">This is test for style</div>
	<br/>
	<input type="button" value="Clear CSS"  onclick="javascript:RemoveAllCsssClassOnControl();"/><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.
jquery-remove-or-speicif-classes

In above i have removed the css class 'background'. 

Post a Comment