jQuery Remove All Classes Examples

If you wish to use jQuery to remove all classes of an element on a web page, it can be done very easily. In this article, I am going to share easy way to delete the classes from different elements of a web page, such as Textbox, Textarea, Select Dropdown, Image, etc.

How to use jQuery to Remove All Classes

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 all of the classes applied to each of those elment, 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="Delete all classes from Textbox">
  </p>
  <p>
    <label for="message">Message</label>
    <input type="submit" name="sbt_remove2" id="sbt_remove2" value="Delete all classes 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="Delete all classes 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="Delete all classes 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="Delete all classes from Div">

Example 1: Removing all the classes from Textbox in jQuery using Textbox ID

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

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

		e.preventDefault();

	});

Example 2: Removing all the classes from Textarea in jQuery using Textarea ID

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

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

		e.preventDefault();

	});

Example 3: Removing all the classes from Select Dropdown in jQuery using Select Dropdown ID

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

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

		e.preventDefault();

	});

Example 4: Erasing all the classes from Image in jQuery using Image ID

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

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

		e.preventDefault();

	});

Example 5: Deleting all the classes from Div in jQuery using Div ID

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

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

		e.preventDefault();

	});

That’s it!

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