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

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

<pre><code>// 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();
    }
});
</code></pre>

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

<p>Thanks</p>
