How to check if element is empty after the DOM has changed?

Question

I have this code:

$(function() {
  $('.delete').click(function() {
    $(this).closest('li').remove();
  });

  $('#items').change(function() {
    if ($(this).is(':empty')) {
      alert('No more conditions');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a></li>
</ul>

As soon as I click on the link, I will get an empty UL but using .is('empty') on .change() event doesn't trigger the alert.

Is that the correct way to check whether the element is empty or not after the DOM changes? If not what would be the right one?

Note: the solution has to be compatible with older browsers like IE8

Take a look at https://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery — Alvaro, Nov 14 '16 at 21:45

score 3 · Accepted Answer · answered Nov 14 '16 at 21:45

How about this solution. Hope it helps!

$(function() {
  $('.delete').click(function() {
  $(this).closest('li').remove();
  if ($('#items li').length === 0) {
  alert('No more conditions');
  }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a></li>
</ul>

score 2 · Answer 2 · answered Nov 14 '16 at 21:42

2

The change event cannot be used with a plain DOM element, it can only be used by an input type element. So to answer your question, no, that would not be the appropriate way to address this and will not work.

You should probably just include the check for existence inside of the event handler doing the removal.

$('.delete').click(function() {
    $(this).closest('li').remove();
    if ($('#items').is(':empty')) {
        alert('No more conditions');
    }
});

An alternative approach would be to setup a Mutation Observer for your specific items element, but perhaps that would be overkill if simply checking after each removal suffices.

answered Nov 14 '16 at 21:42

Travis J

81,153
41
202
273

While good information, your code does not work. The issue is that the `:empty` selector is not valid for the `#items` element. Thus, the condition in the `if` does not evaluate to `true`, and the `alert()` is never executed. – Makyen Nov 14 '16 at 21:50
@Makyen - You are [wrong](https://jsfiddle.net/bubc2p41/). Note that it *does* work for this element type, and what you seem to be seeing is a false result from whitespace (which is then not empty). It was a good guess, but in the future you may want to be a little more thorough. – Travis J Nov 14 '16 at 21:55
1

I put your code in a snippet and tried it prior to making the comment. The `
` is deleted, but the `alert()` is not fired.

Makyen

Nov 14 '16 at 21:57

@Makyen - You are just making it worse on yourself. You are **wrong**. This code does what it is supposed to do; that the empty selector returns false when there is excessive whitespace is another issue that has to do with element composure. Your conclusions being drawn here are really based in poor assumptions. – Travis J Nov 14 '16 at 22:00

2

I suggest you try it yourself: [JSFiddle](https://jsfiddle.net/wcr5c8gL/) – Makyen Nov 14 '16 at 22:02

@Makyen - Did you see the example above, or do you simply not read and plow along. This is the example I already gave you: https://jsfiddle.net/bubc2p41/ . Stop trolling. – Travis J Nov 14 '16 at 22:03

1

Of course I saw the example you linked. Did you bother to try the JSFiddle example of your code which I linked? The example I linked is a cut & paste of the code from your answer with the HTML from the Question. When clicked, the `.delete` `

` is deleted, but the `alert()` does not show (in Chrome, Edge, IE11, or Firefox). Your code does not work in the situation in which the OP has described in the question. I would suggest that you refrain from ad hominem arguments and just stick to the facts.

– Makyen Nov 14 '16 at 22:16

score 2 · Answer 3 · answered Nov 14 '16 at 21:47

This event is limited to elements, boxes and elements...

From https://api.jquery.com/change/

Something like this should work:

$(function() {
  $('.delete').click(function() {
    $(this).closest('li').remove();
    handleChange();
  });

  function handleChange() {
    if ($('#items').children().length == 0) {
      alert('No more conditions');
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a></li>
</ul>

Tim Grant · Answer 4 · 2016-11-14T21:55:47.287

The change event won't fire on a ul element when you remove child nodes. You would need a MutationObserver for this. Be aware this feature is not available in MSIE 10 or older.

$().ready(function documentReady() {
    console.log("%c Document Ready", 'color: #093');

    $(function() {
      $('.delete').click(function() {
        $(this).closest('li').remove();
      });

    var observer = new MutationObserver(function(mutations) {
        if ( $("#items").find("li").length === 0) {
            console.log('No more conditions');
        }    
    });

    var targetNode = document.getElementById("items");
    observer.observe(targetNode, { childList: true });

    });
});

If you need similar functionality for older versions of MSIE, you can use the similar (but inferior) Mutation Events functionality. Detect for MutationObserver and use that if available, otherwise, fall back to MutationEvent.

Good example but will not work for me since I need backwards compatibility right now — ReynierPM, Nov 14 '16 at 21:53

score 1 · Answer 5 · answered Nov 14 '16 at 21:56

You can use MutationObserver() with childList and subtree options set to true

$(function() {
  $(".delete").click(function() {
    $(this).closest("li").remove();
  });

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (!mutation.target.children.length) {
        console.log(mutation.target.id + " is empty. " + "No more conditions");
      }
    })
  });

  observer.observe($("#items")[0], {
    childList: true,
    subtree: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a>
  </li>
</ul>

score 0 · Answer 6 · answered Nov 14 '16 at 21:43

Try using .children() instead

It returns a jQuery object that contains a collection elements (check the console.log()).

$('.delete').click(function() {
  $(this).closest('li').remove();
  console.log( $('#items').children().length, $('#items').children() );
  if (!$('#items').children().length) {
   alert('No more conditions');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a></li>
  <li><a href="#" class="delete">Delete me</a></li>
</ul>

While this code works, this answer would be a much better if you explained *why* the selector `:empty` is not valid for the `#items` element. — Makyen, Nov 14 '16 at 21:46

score 0 · Answer 7 · answered Nov 14 '16 at 21:56

Done using jQuery custom event may not be perfect way but just another option.

$(function() {
  $('.delete').click(function() {
    $(this).closest('li').remove();
    $.event.trigger("limodeified");
  });

  $(document).on("limodeified", function() {
    if ($("#items").html().trim() === "") {
      alert('No more conditions');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="items">
  <li><a href="#" class="delete">Delete me</a>
  </li>
</ul>

How to check if element is empty after the DOM has changed?

7 Answers7