{"id":4021,"date":"2014-07-14T10:14:31","date_gmt":"2014-07-14T10:14:31","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3991"},"modified":"2014-07-14T10:14:31","modified_gmt":"2014-07-14T10:14:31","slug":"remove-single-or-multiple-attributes-using-jquery-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/remove-single-or-multiple-attributes-using-jquery-examples\/","title":{"rendered":"Remove Single Or Multiple Attributes Using jQuery Examples"},"content":{"rendered":"<p>When working with different elements of a website, there might be times when you have come across different elements containing a single attribute or multiple attributes. These attributes can, in turn, consist of single or multiple properties. So in this article, I am going to share with you very easy way to get rid of either a single attribute or multiple attributes from any element of your choice using jQuery with easy to follow examples.<\/p>\n<h2>How To Remove\u00a0Single Or Multiple Attributes:<\/h2>\n<p><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=4021\" 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     Let\u2019s look at how to do this by means of examples. Assume that we have couple of div elements with attributes. We will see how to remove single &amp; multiple attributes from it.<\/p>\n<h2>Examples:<\/h2>\n<h3>Example 1: Remove single attribute from an element:<\/h3>\n<p>In this example, we have a div with an attribute called \u201cstyle\u201d. This \u201cstyle\u201d attribute contains multiple properties such as \u201cbackground-color\u201d and \u201ccolor\u201d. We also have a button and when this button is clicked, we will remove the style attribute and the div will appear plain.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div id=\"my_div1\" style=\"background-color: gold; color: darkgreen;\"&gt;This is a div with a single \"style\" attribute.&lt;\/div&gt;\n\n&lt;input type=\"submit\" name=\"sbt_remove_single_property\" id=\"sbt_remove_single_property\" value=\"Remove Style Attribute\"&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\"&gt;\n\n\u00a0\u00a0\u00a0$(document).ready(function () {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#sbt_remove_single_property').on(\"click\", function () {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#my_div1').removeAttr('style');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 2: Remove multiple attributes from an element:<\/h3>\n<p>In this example, we have a div with an attribute called \u201cstyle\u201d and \u201cclass\u201d. This \u201cstyle\u201d attribute contains multiple properties such as \u201cbackground-color\u201d and \u201ccolor\u201d. The \u201cclass\u201d attribute contains multiple properties that affects the way this div is displayed even further. Next, we have a button and when this button is clicked, we will remove both the \u201cstyle\u201d and the \u201cclass\u201d attributes and the div will appear plain.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div id=\"my_div2\" class=\"highlight\" style=\"background-color: lightblue; color: purple;\"&gt;This is a div with multiple attributes (style and class).&lt;\/div&gt;\n\n&lt;input type=\"submit\" name=\"sbt_remove_multiple_properties\" id=\"sbt_remove_multiple_properties\" value=\"Remove Style and Class Attributes\"&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\"&gt;\n\n\u00a0\u00a0\u00a0$(document).ready(function () {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#sbt_remove_multiple_properties').on(\"click\", function () {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#my_div2').removeAttr('style class');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0});\n\n&lt;\/script&gt;<\/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=4021\" 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<h3>Conclusion:<\/h3>\n<p>So from the above example, we can conclude that we can remove a single attribute or multiple attributes from any element. <strong>To remove multiple attributes, simply specifying the attributes separated by space will suffice<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with different elements of a website, there might be times when you have come across different elements containing a single attribute or multiple attributes. These attributes can, in turn, consist of single or multiple properties. So in this article, I am going to share with you very easy way to get rid of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"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":[126,20,169,13],"tags":[42,43,41],"class_list":["post-4021","post","type-post","status-publish","format-standard","hentry","category-demos","category-jquery-tips-and-tricks","category-jquery-demos","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-12R","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4021","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=4021"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4021\/revisions"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=4021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=4021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=4021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}