jQuery Remove Multiple Classes Examples / Demos

Are you wanting to use jQuery to remove multiple classes from different elements such as Textbox, Textarea, Select Drop down, Div, Image or any other html element? If yes, here are different examples with Demo that will show you how to do just that. Read on for more info.

How to use jQuery to Remove Multiple 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 delete the multiple classes when a button is clicked. So here we go:

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

  <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 first_name Class and Red Border from Textbox">
  </p>
  <p>
    <label for="message">Message</label>
    <input type="submit" name="sbt_remove2" id="sbt_remove2" value="Remove Message Class And Thick Border Class 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 States Class and Orange Border Class 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 Image Border and 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 My_Div class and Width and Height class from Div">

Example 1: Removing multiple classes from Textbox in jQuery using Textbox ID

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

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

		e.preventDefault();

	});

Example 2: Removing multiple class from Textarea in jQuery using Textarea ID

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

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

		e.preventDefault();

	});

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

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

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

		e.preventDefault();

	});

Example 4: Deleting multiple classes from Image in jQuery using Image ID

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

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

		e.preventDefault();

	});

Example 5: Erasing multiple classes from Div in jQuery using Div ID

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

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

		e.preventDefault();

	});

That’s it!

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