I have the below statement that checks to see if any of the Divs with id #Drop are empty, if one is empty it shows an alert. however currently when any div has content inside it the statement no longer works.

I guess what I'm trying to say is that i want it so an alert shows up if ANY div is empty. There are 4 Divs in total and if any one of them is empty the alert message should appear, it doesn't matter if for example 3 of the 4 have content the alert should trigger whenever there is an empty div.

HTML:

 <div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

JS:

$("#run").click(function(){
    if ($("[id^='Drop']").html() === ""){
        alert("empty")// ...
    }
});

I have the below statement that checks to see if any of the Divs with id #Drop are empty, if one is empty it shows an alert. however currently when any div has content inside it the statement no longer works.

I guess what I'm trying to say is that i want it so an alert shows up if ANY div is empty. There are 4 Divs in total and if any one of them is empty the alert message should appear, it doesn't matter if for example 3 of the 4 have content the alert should trigger whenever there is an empty div.

HTML:

 <div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

JS:

$("#run").click(function(){
    if ($("[id^='Drop']").html() === ""){
        alert("empty")// ...
    }
});

• javascript
• jquery
• html
• css

4 Answers 4

use jQuery :empty selector . read more about :empty selector.

Description: Select all elements that have no children (including text nodes).

check DEMO

 $("#run").click(function(){
     if ($("[id^='Drop']:empty").length){
        alert("empty")// ...
     }
 }); 

Second option : as i have mention in my ment and @A. Wolff mention in answer ment here i add second option

DEMO

$("#run").click(function(){       
    if ($("[id^='Drop']").is(":empty")){
     alert("empty")// ...
    };
});

$("#run").click(function(){
    if ($("[id^='Drop']").is(":empty")){
        alert("empty")// ...
    };
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="run">click</div>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

You can try something like this too

$('div').each(function(index){
    if($(this).text() == ''){
        index=parseInt(index+1 ,10)
        alert('The div at '+index+' is empty')
    }
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)">text</div>

Try this,

for(i=0;i<=4;i++)
{
    if($("div#Drop"+i).length==0)
    {
        alert("DIV with id Drop"+i+"is empty");
        return false;
    }
}