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.

Answer 2

You have unclosed attribute class="remove-row at the first row.

See here

Answer 3

Nick's answer should work, but you can do this too, I don't know which one is better, probably Nick's one, but it may help anyway...

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

Answer 4

Wouldn't it be easier to do the remove/hide before hand?

like this :

$("a.remove-row").live('click', function(eve){
      $(this).hide();
      <The rest of your code logic>
         ......