Onclick JavaScript not check specific is div have HTML in it or not

Question

I have two div with img1 and img2 ids respectively. I want to check either div contain further HTML element or not, it is giving me that HTML is not empty, while it is empty, as you can see it in code.

As i click on the upload button, it alert me with message "not empty" , even #img1 is empty.

My Question why it is executing wrong condition?

 $(document).ready(function(e) { $('#upload').on('click',function(){ if($('#img1').html()==''){ $('#img1').addClass('TuyoshiImageUpload_div'); $('#img1 input[name=image]').trigger('click'); }else{ alert('not empty'); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> </div> 

Answer 1

There must be some kind of other javascript error on your page which is causing such behavior. Otherwise, your existing code snippet is running perfectly fine without any issue. Try running it.

Answer 2

You can use :empty selector with .is() method.

if($('#img1').is(':empty'))

 $(document).ready(function(e) { $('#upload').on('click', function() { if ($('#img1').is(':empty')) { console.log('empty'); } else { console.log('not empty'); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> 

Answer 3

I think You Need This

 $(document).ready(function(e) { $('#upload').on('click',function(){ if ($('#img1').is(':empty')){ alert('empty'); $('#img1').addClass('TuyoshiImageUpload_div'); $('#img1 input[name=image]').trigger('click'); }else{ alert('not empty'); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> 

Answer 4

You can use .is().

if( $('#leftmenu').is(':empty') ) {

Or you could just test the length property to see if one was found:

if( $('#leftmenu:empty').length ) {

You can use $.trim() to remove whitespace (if that's what you want) and check for the length of the content.

if( !$.trim( $('#leftmenu').html() ).length ) {

Answer 5

You can use jquery children method and check its length to find if a div is empty

 $(document).ready(function(e) { $('#upload').on('click', function() { //if ($('#img1').html() == '') { if ($('#img1').children().length <= 0) { $('#img1').addClass('TuyoshiImageUpload_div'); $('#img1 input[name=image]').trigger('click'); } else { alert('not empty'); } }) }); 

 .TuyoshiImageUpload_div { width: 30px; height: 40px; border: 1px solid green !important; } div {} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="img1" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left"></div> <div id="img2" class="col-sm-3" style=" border:1px solid red; height:50px; width:50px; float:left; margin-left:15px"></div> <div> <input type="button" value="click me" id="upload" /> 

Answer 6

Something really simple you can do, (without having to use jQuery) is the following:

var isElementEmpty = document.getElementById("someDivElement").getElementsByTagName('*').length > 0;

At that point isElementEmpty will be either true of false. This does not get affected by whitespace. It only works with HTML elements.