CODEWITHSUNDEEP
javascriptjqueryhtml
Hamza Zafeer
Hamza Zafeer

Reputation: 2436

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

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>

Upvotes: 1

Views: 93

Answers (6)

Dimitrios Matanis
Dimitrios Matanis

Reputation: 926

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.

Upvotes: 1

brk
brk

Reputation: 50291

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" />

Upvotes: 1

David
David

Reputation: 41

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.

Upvotes: 4

kabooya
kabooya

Reputation: 566

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 ) {

Upvotes: 1

Karan Mehta
Karan Mehta

Reputation: 415

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" />

Upvotes: 3

Satpal
Satpal

Reputation: 133403

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" />

Upvotes: 3

Related Questions