How can I get a list element to be “toggled” (JQuery) and then when this animation is done removed(), all upon a mouse click of the img in the <li>?

Question

As it stands the remove function doesn't work. Any suggestions?

var toggle = new function() {
    $(document).on('click', 'img', function () {
        $(this).parent().toggle('slide');
    })
}    
var remove = new function() {
    $(document).on('click', 'img', 
    setTimeout(function () {
        $(this).parent().remove();
    }, 1000);
)
}

Answer 1

The function your are looking for is .queue() . It will execute a provided callback after the previous animation has finished:

$(document).on('click', 'img', function() {
    var $entry = $(this).parent();
    $entry.toggle('slide').queue(function(next) {
        $entry.remove();
        next();
    });
});

Working example: http://jsfiddle.net/rbBgS/