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>

It's good that you've tried to provide a short code snippet, but that snippet does not exhibit the problem you describe. Given that the code contains #img1 input[name=image] as a selector, it suggests that at least some of the time, the #img1 div is not empty. Check that if you are adding to and removing from the div's contents, your removal process is total, including any whitespace. — Alohci
– Alohci, Commented Dec 22, 2017 at 14:19

David · Accepted Answer · 2017-12-22 13:19:46Z

4

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.

answered Dec 22, 2017 at 13:19

David

414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2017-12-22 13:17:16Z

3

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

answered Dec 22, 2017 at 13:17

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Karan Mehta · Accepted Answer · 2017-12-22 13:17:23Z

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

kabooya · Accepted Answer · 2017-12-22 13:18:44Z

1

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

answered Dec 22, 2017 at 13:18

kabooya

5644 silver badges18 bronze badges

Comments

brk · Accepted Answer · 2017-12-22 13:21:56Z

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

Dimitrios Matanis · Accepted Answer · 2017-12-22 13:30:53Z

1

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.

edited Dec 22, 2017 at 13:30

answered Dec 22, 2017 at 13:23

Dimitrios Matanis

9261 gold badge6 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related