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

Answer 1

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.