jQuery Remove Class using .removeClass() method Examples/Demos

Wondering how to use jQuery to remove class of an element on a web page? Then this article is for you. In this article, I am going to share easy ways of removing a single class from different elements of a web page, such as Textbox, Textarea, Select Dropdown, Image, etc.

How to use jQuery to Remove Class using the .removeClass() method

Let’s assume that we have different html elements on a web page such as div, image, textbox,textarea, etc. We will see how to remove a single class when a button is clicked. So here we go:

Here is the basic common HTML source code for all the following examples:

<style type="text/css">
.first_name {
	background-color: #FFFF99;
	border: 1px solid #AEAE00;
}
.message {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.subscribe {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.update {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.states {
	color: #D70000;
	font-weight: bold;
}
.my_div {
	border: 10px solid #C3C;
	background-color: #C9C;
}
.image_border {
	border: 1px solid #CCC;
	padding: 5px;
}
</style>

  <p>
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name" class="first_name">
    <input type="submit" name="sbt_remove1" id="sbt_remove1" value="Remove Textbox Class">
  </p>
  <p>
    <label for="message">Message</label>
    <input type="submit" name="sbt_remove2" id="sbt_remove2" value="Remove Textarea Class">
    <br>
    <textarea name="message" id="message" cols="45" rows="5" class="message"></textarea>
  </p>
  <p>
    <label for="states">States</label>
    <select name="states" id="states" class="states">
      <option value="TX" selected="selected">TX</option>
      <option value="AL">AL</option>
      <option value="CA">CA</option>
    </select>
    <input type="submit" name="sbt_remove3" id="sbt_remove3" value="Remove Select Dropdown Class">
  </p>

  <p>
  <img src="images/money.jpg" id="image_border" class="image_border" />
  <input type="submit" name="sbt_remove4" id="sbt_remove4" value="Remove Image Class">  
  </p>

  <div id="my_div" class="my_div">This is MY DIV</div>
  <input type="submit" name="sbt_remove5" id="sbt_remove5" value="Remove Div Class">

<p>	
<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">
</p>

Example 1: Remove Textbox Class in jQuery using Textbox ID

	$('#sbt_remove1').on("click", function(e){		

		$('#first_name').removeClass('first_name');

		e.preventDefault();

	});

Example 2: Remove Textarea Class in jQuery using Textarea ID

	$('#sbt_remove2').on("click", function(e){		

		$('#message').removeClass('message');

		e.preventDefault();

	});

Example 3: Remove Select Dropdown Class in jQuery using Select Dropdown ID

	$('#sbt_remove3').on("click", function(e){		

		$('#states').removeClass('states');

		e.preventDefault();

	});

Example 4: Remove Image Class in jQuery using Image ID

	$('#sbt_remove4').on("click", function(e){		

		$('#image_border').removeClass('image_border');

		e.preventDefault();

	});

Example 5: Remove Div Class in jQuery using Div ID

	$('#sbt_remove5').on("click", function(e){		

		$('#my_div').removeClass('my_div');

		e.preventDefault();

	});

That’s it!

Do you know of any other ways to use  jQuery removeClass method? Feel free to suggest by commenting below.