Trigger Custom jQuery Event and delay it

Question

I want to trigger the event of an element being removed from the DOM. Sadly I must use the original .remove() , because it is being called from an external script. So I extended jQuery in order to catch the event:

var oldRemove = $.fn.remove;
$.fn.remove = function(){
    this.trigger('remove');
    return oldRemove.apply(this, arguments);
};

This works fine. I can use it like this:

$('ul').find('li').on('remove', function(e){
    console.log('EVENT REGGED');
});

I want to use this code to highlight the deletion of elements . An example: Set the color of the element to red, wait 2 seconds and then delete it.

What is the most elegant way to do this? I already experimented with e.preventDefault() and e.stopPropagation or to return something from the trigger, but nothing worked.

Here's a fiddle so you can test it: http://jsfiddle.net/xahthnjz/

What can I do in order to first highlight the element and then delay the deletion?

Answer 1

You can use a setTimeout within your custom jQuery function to handle the removal of the item after applying the color change. I've made an example here: http://jsfiddle.net/mkjj94m1/2/

I've renamed the function to deleteItem as remove is an existing jQuery function.