jQuery closest TR selection

Question

Hope someone can advise. Having issues trying to remove a row once a link has been clicked.

HTML

<table>
  <tr><td>Some Data</td><td><a href="#" class="remove-row>Remove Row</a></td></tr>
  <tr><td>Some Data</td><td><a href="#" class="remove-row">Remove Row</a></td></tr>
</table>

Now the JS

 $("a.remove-row").live('click', function(eve){
  eve.preventDefault();
  $.ajax({
   type: 'GET',
   url: '/someaction/',
   dataType: 'json',
   success: function(msg){
    if(msg.error){
     alert(msg.error);
    }else{
     $(this).closest('tr').remove();
     alert(msg.success);
    }    
   }
  })
 });

This should be real simple buts its not removing the row. Just for kicks if I change it to something like

$('.remove-row').addClass('foo');

It will add foo to all table rows. So can understand why its not removing the closest row.

Any Ideas ?

Thank in advanced.

Answer 1

The problem is this currently refers to the ajax object in your success callback, but it's an easy fix, use the content option like this:

 $("a.remove-row").live('click', function(eve){
  eve.preventDefault();
  $.ajax({
   context: this,                    //add this here!
   type: 'GET',
   url: '/someaction/',
   dataType: 'json',
   success: function(msg){
    if(msg.error){
     alert(msg.error);
    }else{
     $(this).closest('tr').remove();
     alert(msg.success);
    }    
   }
  })
 });

The context option dictates what this will be in the $.ajax() callback functions, since you want it to be the .remove-row you clicked on, use this as the option.