{"id":1095,"date":"2012-07-30T15:39:22","date_gmt":"2012-07-30T15:39:22","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1095"},"modified":"2012-07-30T15:39:22","modified_gmt":"2012-07-30T15:39:22","slug":"jquery-remove-css-remove-css-from-div-using-jquery-example","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-remove-css-remove-css-from-div-using-jquery-example\/","title":{"rendered":"jQuery Remove CSS From Div Examples"},"content":{"rendered":"<p>If you have always wondered how to remove CSS using jQuery, then you have come to the right place. In this article, I am going share very easy way to <em><strong>remove CSS from DIV or any element using jQuery<\/strong><\/em>. Read on to find out more.<!--more--><\/p>\n<h2>Examples to Remove CSS from DIV using jQuery<\/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=1095\" 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>To demonstrate on <strong>how to remove css from Div or any other element<\/strong> in a web page, here is an example. I have a div with ID &#8220;my_div&#8221; and it has three classes applied to it. The green class makes the text color green. Red class applies red background color to the div and the blue class applies blue border to the div. Now I want to remove the red class upon body load so that the background color does not turn to red.<\/p>\n<h3>Example: Remove CSS from Div using jQuery on Page load using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Remove CSS from Div or any element&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n.green {\n\tcolor:#090;\t\n}\n.red {\n\tbackground-color: #F00;\n}\n.blue {\n\tpadding: 5px;\n\tborder: 2px solid #09F;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div id=\"my_div\" class=\"green red blue\"&gt;This is my div with multiple css. We are removing \"red\" class on page load.&lt;\/div&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n$(document).ready(function(){\n\n\t$(\"#my_div\").removeClass('red');\n\n});\t\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>In the above, if you comment the jQuery code and view the page, you will notice that the green text color, red background &amp; blue border are applied, whereas when the code is uncommented, it removes the red\u00a0background \u00a0color.<\/p>\n<p>So that&#8217;s how you use <em><strong>jQuery to remove CSS from a Div<\/strong><\/em>. Simple, isn&#8217;t it?<\/p>\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=1095\" 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<h5>Your Turn!<\/h5>\n<p>Do you know of any other ways to <em><strong>remove CSS from a Div or any other element\u00a0using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have always wondered how to remove CSS using jQuery, then you have come to the right place. In this article, I am going share very easy way to remove CSS from DIV or any element using jQuery. Read on to find out more.<\/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":[20,13],"tags":[42,111,41],"class_list":["post-1095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-remove-css","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-hF","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1095","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=1095"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1095\/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=1095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}