How to use jQuery to Remove Specific Class

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 delete the specific class(es) 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;
}
.blue_text {
	color: #06F;	
}
.redborder {
	border: 1px solid #F00;	
}
.thick_border {
	border: 10px solid #F00;		
}
.orange_border {
	border: 10px solid #F90;
}
.img_bottom_thick_border {
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #3C9;	
}
.width_and_height {
	width: 200px;
	height: 200px;
}
</style>

  <p>
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name" class="first_name blue_text redborder">
    <input type="submit" name="sbt_remove1" id="sbt_remove1" value="Remove Red Border from Textbox">
  </p>
  <p>
    <label for="message">Message</label>
    <input type="submit" name="sbt_remove2" id="sbt_remove2" value="Remove Thick Border from Textarea">
    <br>
    <textarea name="message" id="message" cols="45" rows="5" class="message thick_border"></textarea>
  </p>
  <p>
    <label for="states">States</label>
    <select name="states" id="states" class="states orange_border">
      <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 Orange Border from Select Dropdown">
  </p>

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

  <div id="my_div" class="my_div width_and_height">This is MY DIV</div>
  <input type="submit" name="sbt_remove5" id="sbt_remove5" value="Remove Width and Height from Div">

Example 1: Removing a specific class from Textbox in jQuery using Textbox ID

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

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

		e.preventDefault();

	});

Example 2: Removing a specific class from Textarea in jQuery using Textarea ID

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

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

		e.preventDefault();

	});

Example 3: Removing a specific class from Select Dropdown in jQuery using Select Dropdown ID

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

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

		e.preventDefault();

	});

Example 4: Erasing a specific class from Image in jQuery using Image ID

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

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

		e.preventDefault();

	});

Example 5: Deleting a specific class from Div in jQuery using Div ID

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

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

		e.preventDefault();

	});

That’s it!

Do you know of any other ways to use jQuery to remove specific class? Feel free to suggest by commenting below.