Checking when all li's have been dynamically removed

Question

I've got a function that handles various types of behaviour for a property listing (My Shortlist) which is a <ul><li> setup. One type of behaviour is removing a property listing item <li> when you click a button within each item, that's working fine however my if statement to check when all items have been removed isn't working.

Can you tell me what I'm doing wrong? Here's the part of the function that handles removing items via the onclick event of the button and the dodgy if statement:

// Remove an item from the shortlist
$(this).find('.btn-minus').click(function() {
    var btnRemove = $(this);
    var propTile = $(this).parents('.property-tile');
    var propList = $('#property-listings');
    // If IE 8 / 7
    if ($('html').hasClass('lte8')) {
        propTile.hide('slide', 300, function()  {
            btnRemove.data("tooltip").hide();
        });
    }
    // All other browsers
    else {
        propTile.fadeOut(200, function()  {
            btnRemove.data("tooltip").hide();
            $(this).remove();
        }); 
    }
    if (propTile.length === 0) {
        propList.remove();
    }
});

And here's the call to the function: $(".my-shortlist").myShortlist(); where .my-shortlist is the <ul> element.

Thanks

Isn't the problem that you tell the prop tile to slowly fade out (200 milliseconds) and then remove it, but then immediately (before the fade is done) check if the length is 0 (which it isn't yet, it is still fading)? — Roger Lindsjö, Jun 05 '12 at 07:33
Yes I see that now, so I've set up a callback when the `fadeOut` is complete but it's firing after each individual item has been removed, I'm struggling to set it up so it fires once ALL items have been removed from the `
`. — crite, Jun 05 '12 at 10:20

score 0 · Accepted Answer · answered Jun 05 '12 at 08:20

0

You have put the '.property-tile' elements in the variable, so hiding them afterwards doesnt remove them from your objects variable. Therefore you need to re-execute the selector.

if ($(this).parents('.property-tile').length == 0) {
    propList.remove();
}

Also, like Roger Lindsjö mentioned, you have the problem of doing this check before these elements are actually hidden. You need to do this in the callback of the hide / fadeOut.

answered Jun 05 '12 at 08:20

iddo

749
3
11

Thanks, I've set up the callback but of course it's firing as soon as the current item has faded out, I need to fire it when all items have faded out. ` function complete() { if ($(this).parents('.property-tile').length == 0) { propList.remove(); } }` – crite Jun 05 '12 at 10:02
I got it working, I had to detect the last `
` using the `nextAll()` method then once the `fadeOut` had finished on the last `
` remove `propList` like this: `propTile.fadeOut(400, function() {btnRemove.data("tooltip").hide(); $(this).remove();if (count == 0) {propList.remove();}})`

crite

Jun 05 '12 at 10:38

score 0 · Answer 2 · answered Jun 06 '12 at 00:21

I got it working, I had to detect the last <li> using the nextAll() method then once the fadeOut effect had finished on the last <li> remove propList. Here's the full code:

// Remove an item from the shortlist
// http://stackoverflow.com/questions/2358205/invoking-a-jquery-function-after-each-has-completed
$(this).find('.btn-minus').click(function() {
    // Set variables
    var btnRemove = $(this);
    var propTile = $(this).parents('.property-tile');
    var propList = $(this).parents('#property-listings');
    var propItems = $(this).parents('.property-tile').nextAll(), count = propItems.length;
    // Remove entire list and other elements when all items have been removed
    function complete() {
        propList.remove();
        $('.sticky-panel-toolbar, .property-disclaimer, .sticky-panel').remove();
    } 
    // Remove individual items
    // If IE 8 / 7
    if ($('html').hasClass('lte8')) {
        propTile.hide('slide', 300, function()  {
            btnRemove.data("tooltip").hide();
            // Evoke complete() function
            if (count == 0) {
                complete();
            }
        });
    }
    // All other browsers
    else {
        propTile.fadeOut(400, function() {
            btnRemove.data("tooltip").hide();
            $(this).remove();
            // Evoke complete() function
            if (count == 0) {
                complete();
            }
        })
    }
});

Cheers

Checking when all li's have been dynamically removed

2 Answers2