Fadeout and delete row table

Question

I know this question has been asked before, but I seem to have a different problem than before. I have a table, and I would like each row to have a delete link that disappears from the table row and then removes the table row from the DOM. My first problem was that I couldn't get the jQuery fadeOut effect to work on the rows of the table and found that you should actually call fadeOut on the elements of the td row. So here is my jJavascript:

$('span.deleteItem').live('click', function() { $(this).closest('tr').find('td').fadeOut('fast', function(){ $(this).parents('tr:first').remove(); }); return false; }); 

The span element lives inside td, so I find the closest tr element when I click, and then drop the fadeOut function on each of its td elements. This works great.

The problem is that in the callback function, 'this' actually refers to the window element, and not to the separate td element that was hidden. In my understanding, 'this' should refer to an element that has disappeared.

Any ideas?

Answer 1

Grab the link "this" and pass it:

 $('span.deleteItem').live('click', function() { var here = this; $(this).closest('tr').find('td').fadeOut('fast', function(here){ $(here).parents('tr:first').remove(); }); return false; }); 

Answer 2

I think this is what you are looking for:

 $('span.deleteItem').live('click', function() { var tableRow = $(this).closest('tr'); tableRow.find('td').fadeOut('fast', function(){ tableRow.remove(); } ); }); 

EDIT: I think Opatut is right , as shown in his jsFiddle .