{"id":3873,"date":"2013-05-20T19:05:09","date_gmt":"2013-05-20T19:05:09","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3873"},"modified":"2013-05-20T19:05:09","modified_gmt":"2013-05-20T19:05:09","slug":"jquery-check-if-div-is-empty-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-check-if-div-is-empty-examples\/","title":{"rendered":"jQuery Check If Div Is Empty Examples"},"content":{"rendered":"<p>When working with Divs and jQuery, there might have been a situation when you needed to know dynamically if any given div contains any content at all or not. Based upon this, you might want to trigger an action. So in this article, I am going to share easy ways to <em><strong>find out if a Div is empty or not<\/strong><\/em> by means of easy to follow examples. Check out the Demo to see how it works in real time.<\/p>\n<h2>How To Check\u00a0If Div Is Empty 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=3873\" 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 three \u00a0divs with IDs &#8216;my_div1&#8217;, &#8216;my_div2&#8217;\u00a0and &#8216;my_div3&#8217;.<\/p>\n<p>&#8216;my_div1&#8217; will not contain any content, \u00a0&#8216;my_div2&#8217; will have content in it and \u00a0&#8216;my_div3&#8217; will contain only a single space and no actual content.\u00a0Now we will check if there are any contents in these div or not using jQuery<\/p>\n<h3>Here is the common HTML for all the following examples:<\/h3>\n<pre class=\"lang:xhtml decode:true\">\t&lt;div id=\"my_div1\"&gt;&lt;\/div&gt;\n\n\t&lt;div id=\"my_div2\"&gt;This is the second div and it has some content. Div 1 is located above and it is invisible as it does not have any content. But you should be able to see the purple borders on the div 1 above. There is another div with red border below.&lt;\/div&gt;    \n\n\t&lt;div id=\"my_div3\"&gt; &lt;\/div&gt;    \n\n&lt;br&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check1\" id=\"sbt_check1\" value=\"Check if Div 1 is empty\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check2\" id=\"sbt_check2\" value=\"Check if Div 2 is empty\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check3\" id=\"sbt_check3\" value=\"Check if Div 3 is empty\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check4\" id=\"sbt_check4\" value=\"Check if Div 3 is empty After Applying Trim\"&gt;<\/pre>\n<h3>Example 1: \u00a0Check if div is empty and alert the status when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function(){\n\n\t$('#sbt_check1').on(\"click\", function(e){\t\t\n\n\t\tif( $('#my_div1').is(':empty') ) \n\t\t\t{\t\n\t\t\talert('Div 1 is Empty!');\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Div 1 is NOT Empty!');\t\t\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});\n\n\t$('#sbt_check2').on(\"click\", function(e){\n\n\t\tif( $('#my_div2').is(':empty') ) \n\t\t{\t\n\t\t\talert('Div 2 is Empty!');\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Div 2 is NOT Empty!');\t\t\t\n\t\t}\t\t\t\t\t\n\n\t\te.preventDefault();\n\n\t});\n\n\t$('#sbt_check3').on(\"click\", function(e){\n\n\t\tif( $('#my_div3').is(':empty') ) \n\t\t{\t\n\t\t\talert('Div 3 is Empty!');\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Div 3 is NOT Empty!');\t\t\t\n\t\t}\t\t\t\t\t\n\n\t\te.preventDefault();\n\n\t});\t\t\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Results of Example 1:<\/h3>\n<p>When you run the above code and click on the first button, you will see an alert that says that my_div1 is <strong>Empty<\/strong>. This is correct as there is no content in it.<\/p>\n<p>When you click on the second button, you will see an alert that says that my_div2 is <strong>Not Empty<\/strong>. This is correct as there is some custom content in it.<\/p>\n<p>When you click on the third button, you will see an alert that says that my_div3 is <strong>NOT Empty<\/strong>. Well, as far as we can see, there is no content in it. Yet, the alert says that my_div3 is <strong>NOT empty<\/strong>. Why? Are you surprised why? Well, here&#8217;s the reason. &#8216;my_div3&#8217; does not contain any actual text or any other HTML content BUT it does contain a &#8220;space&#8221; or &#8220;white space&#8221;. Now even a space is considered as the content of a div. And for this reason, we see the alert that it is <strong>NOT empty<\/strong>. So how to fix this? Our next example will solve this situation.<\/p>\n<h3>Example 2: \u00a0Apply trim to a div&#8217;s content and then check if it is empty or not<\/h3>\n<pre class=\"lang:xhtml decode:true\">\t$('#sbt_check4').on(\"click\", function(e){\n\n\t\t\/\/Get the HTML content of the div\n\t\tvar div3_content = $('#my_div3').html();\n\n\t\t\/\/Apply trim to the retrieved HTML content and then perform the check\t\t\n\t\tif( $.trim(div3_content) == '' ) \n\t\t{\t\n\t\t\talert('Div 3 is Empty!');\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Div 3 is NOT Empty!');\t\t\t\n\t\t}\t\t\t\t\t\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<p>In the above code, we first retrieve the HTML content of the &#8220;my_div3&#8221; . This will remove any spaces in the retrieved content. Now we check this to see if it is empty or not. This will give us the correct output.<\/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=3873\" 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>check if a div is empty or not using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with Divs and jQuery, there might have been a situation when you needed to know dynamically if any given div contains any content at all or not. Based upon this, you might want to trigger an action. So in this article, I am going to share easy ways to find out if a [&hellip;]<\/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,43,41],"class_list":["post-3873","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-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-10t","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3873","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=3873"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3873\/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=3873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}