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.

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.

How to use access the Class attribute of an element using jQuery

For the sake of the example, we are going to assume that we have few divs & each of these divs have at least one or more class applied to them.

Example: Complete HTML + jQuery source code

<html>
<head>
<title>Select Element With Single / Multiple Class in jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>

<div id="my_div1" class="my_class1">This is some content.</div>

<div id="my_div2" class="my_class1 my_class2">This is some content.</div>

<div id="my_div3" class="my_class3">This is some content.</div>

<div id="my_div4" class="my_class4 my_class3">This is some content.</div>

<div id="my_div5" class="my_class5 my_class1 my_class2 my_class3 myclass4">This is some content.</div>

<br>

<input type="submit" name="get1" id="get1" value="Get elements with my_class1" /><br>

<input type="submit" name="get2" id="get2" value="Get elements with my_class1 &amp; my_class2" /><br>

<input type="submit" name="get3" id="get3" value="Get elements with my_class3" /><br>

<input type="submit" name="get4" id="get4" value="Get elements with my_class3 &amp; my_class4" /><br>

<input type="submit" name="get5" id="get5" value="Get elements with my_class5" />

<script type="text/javascript">

$('#get1').click(function() {

	alert( $(".my_class1").attr('id') );

});

$('#get2').click(function() {

	$(".my_class1.my_class2").each( function() {
			alert( $(this).attr("id") );
	})

});

$('#get3').click(function() {

	$(".my_class3").each( function() {
			alert( $(this).attr("id") );
	})

});

$('#get4').click(function() {

	$(".my_class3.my_class4").each( function() {
			alert( $(this).attr("id") );
	})

});

$('#get5').click(function() {

	$(".my_class5").each( function() {
			alert( $(this).attr("id") );
	})

});

</script>

</body>
</html>

Select Element With Single / Multiple Class

In order to be able to show all elements with the corresponding class applied to it, it’s essential that we do it in a loop. Hence this looping is done by using the iterator function “each”. If “each” is not used, then only the first div that has the class applied will be shown & the following div will be ignored, even if it has the class applied to it.

So that’s how you use jQuery Class Selector to select element with single or multiple classes applied to it.

Simple, isn’t it?

Do you know of any other ways to use access class of an element using jQuery? Feel free to suggest by commenting below.

Examples on using jQuery to Get Class

The following example assumes that there is a div with ID “my_div” and a list of all class applied to this div should be alerted, when “Get class” button is clicked.

Example: Using jQuery to get div class

<html>
<head>
<title>jQuery Get Class | Get All Class applied to an element using jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>

<div id="my_div" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

<input type="submit" name="get" id="get" value="Get Class" />

<script type="text/javascript">

$('#get').click(function() {

	alert( $("#my_div").attr("class") );

});

</script> 
</body>
</html>

Simple, isn’t it?

Do you know of any other ways to get class  or get all class list applied to an element using jQuery? Feel free to suggest by commenting below.