Showing text if a div has no children in jQuery

Question

So I've made a to-do list in jQuery, whereby the 'to-do' div is an empty ul and appends list-items upon the 'add task' click event. I'd like to show a message in the 'to-do' ul when there are no items (such as "you have no tasks"). My attempt looks something like this and doesn't work:

if ( $('#todo-list').children().length <= 0 ) {
      $(this).append("<p>You have no tasks</p>");
  }

Any advice? Sorry if the answer is obvious and I've missed the mark

Answer 1

In your code $(this) does not refer to $('#todo-list') because it is inside if block.

To get this done, use

$('#todo-list').append("<p>You have no tasks</p>");

See this fiddle

Hope it helps.

Answer 2

First double check if there are more than one ul you have to use a class selector.

Use insertAfter instead of append, because you can not append a paragraph to the ul. Also use id selector rather than this selector.

 if ( $('#todo-list').children().length <= 0 ) {
      $('#todo-list').append("<p>You have no tasks</p>");
  }

Answer 3

Your code appears to depend on this referring to the #todo-list element:

if ( $('#todo-list').children().length <= 0 ) {
    $(this).append("<p>You have no tasks</p>");
}

...but in the context you're calling it, this probably refers to the window object instead. Variable scoping in javascript is complicated enough that I'm going to defer to others who are much better than I at explaining it .

But we can bypass all that anyway, because in this case, you can let jQuery selectors do most of the work: they will implicitly iterate over every matching element to run any chained functions, such as appending your message:

 // using a classname instead of an ID, since I have two lists: $('.todo-list:empty').append('<li>You have no tasks</li>'); // (Remember also that you can't append a `<p>` to a `<ul>`!) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="todo-list"> <li>One</li> <li>Two</li> </ul> <ul class="todo-list"></ul> 

:empty isn't the same thing as "has no children", though. (Text nodes count as contents, so :empty only matches elements which contain nothing at all, even whitespace.) If your code contains inconvenient whitespace you could use this slightly more complicated selector, which will match a .todo-list element which does not contain <li> elements:

 $('.todo-list:not(:has(li))').append('<li>You have no tasks</li>'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="todo-list"> <li>One</li> <li>Two</li> </ul> <ul class="todo-list"></ul> 

Hypothetically, if the condition you're testing were something that couldn't be easily contained in a path selector, you can chain a .each() after a simpler selector (it can be reasonable to do this even when you know there's only one element, because the same code will work correctly for any number of elements, even zero). Inside that function scope, jQuery uses this to refer to the current DOM element:

 //out here, `this` refers to the window. $('.todo-list').each(function() { // inside the context of this function, `this` refers to the DOM element currently being iterated over. if ($(this).children().length === 0) { $(this).append('<li>You have no tasks</li>'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="todo-list"> <li>One</li> <li>Two</li> </ul> <ul class="todo-list"></ul>