{"id":3133,"date":"2013-03-18T23:28:57","date_gmt":"2013-03-18T23:28:57","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3133"},"modified":"2013-03-18T23:28:57","modified_gmt":"2013-03-18T23:28:57","slug":"jquery-remove-multiple-classes-examples-demos","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-remove-multiple-classes-examples-demos\/","title":{"rendered":"jQuery Remove Multiple Classes Examples \/ Demos"},"content":{"rendered":"<p>Are you wanting to use <em><strong>jQuery to remove multiple classes<\/strong><\/em> 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.<\/p>\n<p><!--more--><\/p>\n<h2>How to use jQuery to Remove Multiple Classes<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3133\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;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:<\/p>\n<p><strong>Here is the basic common HTML source code for all the following examples:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Common HTML source code for all the following examples\">  &lt;p&gt;\n    &lt;label for=\"first_name\"&gt;First Name&lt;\/label&gt;\n    &lt;input type=\"text\" name=\"first_name\" id=\"first_name\" class=\"first_name blue_text redborder\"&gt;\n    &lt;input type=\"submit\" name=\"sbt_remove1\" id=\"sbt_remove1\" value=\"Remove first_name Class and Red Border from Textbox\"&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    &lt;label for=\"message\"&gt;Message&lt;\/label&gt;\n    &lt;input type=\"submit\" name=\"sbt_remove2\" id=\"sbt_remove2\" value=\"Remove Message Class And Thick Border Class from Textarea\"&gt;\n    &lt;br&gt;\n    &lt;textarea name=\"message\" id=\"message\" cols=\"45\" rows=\"5\" class=\"message thick_border\"&gt;&lt;\/textarea&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    &lt;label for=\"states\"&gt;States&lt;\/label&gt;\n    &lt;select name=\"states\" id=\"states\" class=\"states orange_border\"&gt;\n      &lt;option value=\"TX\" selected=\"selected\"&gt;TX&lt;\/option&gt;\n      &lt;option value=\"AL\"&gt;AL&lt;\/option&gt;\n      &lt;option value=\"CA\"&gt;CA&lt;\/option&gt;\n    &lt;\/select&gt;\n    &lt;input type=\"submit\" name=\"sbt_remove3\" id=\"sbt_remove3\" value=\"Remove States Class and Orange Border Class from Select Dropdown\"&gt;\n  &lt;\/p&gt;\n\n  &lt;p&gt;\n  &lt;img src=\"images\/money.jpg\" id=\"image_border\" class=\"image_border img_bottom_thick_border\" \/&gt;\n  &lt;input type=\"submit\" name=\"sbt_remove4\" id=\"sbt_remove4\" value=\"Remove Image Border and Bottom Border from Image\"&gt;  \n  &lt;\/p&gt;\n\n  &lt;div id=\"my_div\" class=\"my_div width_and_height\"&gt;This is MY DIV&lt;\/div&gt;\n  &lt;input type=\"submit\" name=\"sbt_remove5\" id=\"sbt_remove5\" value=\"Remove My_Div class and Width and Height class from Div\"&gt;<\/pre>\n<h3>Example 1: Removing multiple classes from Textbox in jQuery using Textbox ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">\t$('#sbt_remove1').on(\"click\", function(e){\t\t\n\n\t\t$('#first_name').removeClass('first_name redborder');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2: Removing multiple class from Textarea in jQuery using Textarea ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_remove2').on(\"click\", function(e){\t\t\n\n\t\t$('#message').removeClass('message thick_border');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3: Removing multiple class from Select Dropdown in jQuery using Select Dropdown ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_remove3').on(\"click\", function(e){\t\t\n\n\t\t$('#states').removeClass('states orange_border');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 4: Deleting multiple classes from Image in jQuery using Image ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">\t$('#sbt_remove4').on(\"click\", function(e){\t\t\n\n\t\t$('#image_border').removeClass('image_border img_bottom_thick_border');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 5: Erasing multiple classes from Div in jQuery using Div ID<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5\">\t$('#sbt_remove5').on(\"click\", function(e){\t\t\n\n\t\t$('#my_div').removeClass('my_div width_and_height');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3133\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h4>That&#8217;s it!<\/h4>\n<p>Do you know of any other ways to use\u00a0<em><strong>jQuery to remove multiple classes<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[42,149,43,41],"class_list":["post-3133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-jquery-demos-2","tag-jquery-remove-multiple-classes","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-Ox","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3133"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3133\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}