CODEWITHSUNDEEP
javascriptjquery
user1901096
user1901096

Reputation: 247

If div empty append not working

I have a div which can contains n divs inside of it but can also be empty. If the div is empty, this can either be on load when there are no items in it, or when a user deletes the items in it by clicking close, a message such as "You have selected 0 items" should appear.

My idea was to try this with:

if ($('.container').length == 0) {
    $(this).append('<p class="empty">You have selected 0 items</p>');
};

but this is not working? What am i doing wrong?

Code: http://jsfiddle.net/Nj5vx/1/

Upvotes: 0

Views: 1822

Answers (6)

Anujith
Anujith

Reputation: 9370

Try this : http://jsfiddle.net/5Yftg/

$(".close").click(function () {
    $(this).parents('.item').fadeOut(200, function () {
        if ($('.container > .item :visible').length == 0) {
            $('.container').append('<p class="empty">You have selected 0 items</p>');
        };
    });
});

Since you are hiding the divs, look for visible ones...

Upvotes: 2

Skatox
Skatox

Reputation: 4284

Check my jsFiddle of the solution http://jsfiddle.net/Nj5vx/4/

What i did is to call a function to remove items then count how many they exists, if zero then show the message:

$(".close").click(function(){
    $(this).parents('.item').fadeOut(200, function(){
        $(this).remove();
        if ($('.container .item').length == 0) {
            $('.container').append('<p class="empty">You have selected 0 items</p>');
        };    
    }); 
});

Upvotes: 2

War10ck
War10ck

Reputation: 12508

The length in this case is referring to a property on the returned jQuery object. It tells you how many elements on the page matched your, for lack of a better phrase search criteria:

I.E.
'.container .item'

In this case, you code is telling jQuery to search the DOM and when you find no elements, append to that no element.

Upvotes: 0

Charles
Charles

Reputation: 11768

  • fadeOut is asynchronous
  • you need to update the list each time am item is removed

http://jsfiddle.net/charlesbourasseau/Nj5vx/3/

$(".close").click(function(){
    $(this).parents('.item').fadeOut(200, function() {
        $(this).remove();
        update();
    });

});

var update = function() {
    if ($('.container div').length == 0) {
        $('.container').append('<p class="empty">You have selected 0 items</p>');
    };
};

Upvotes: 1

ArVan
ArVan

Reputation: 4275

You are checking the length of div container. It is always present isn't it? As I understood, you need to check the length of items inside. Like this:

if ($('.container .item').length == 0) {
    $(this).append('<p class="empty">You have selected 0 items</p>');
};

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

When you do $('.container'), that selects the <div> element with the class container on it, and returns a jQuery object that contains that element. When you access its length property, you're getting the number of elements that matched, not the number of elements within those elements.

What you want instead is:

$('.container .item').length

That will select the elements with the class item inside the element with class container. If the .container element is empty (has no .item elements), then the length property will be 0.

Upvotes: 3

Related Questions