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.

Lantana

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.

Exception

Nick - Minor correction. In the success: callback, this refers to the xhr object, not window. jsfiddle.net/WzeAh This, of course, has no relevance with regard to your proposed solution. +1 – Quadripartite

@patrick - Sorry, I'll clarify a bit more in the answer, it behaves like window for the current use, e.g. $(this).find(selector) works the same as if $(this) were $(window) or $(document). – Exception

Nick - Unless I misunderstood your clarification, it doesn't seem (inside the callback) as though $(this) gives you the same behavior as $(document), since doing a .find() returns 0 matches. jsfiddle.net/WzeAh/1 EDIT: $(window) gives a 0 result as well. – Quadripartite

@patrick - Updated, you're completely right, I had fubar'd my local jQuery install testing performance on this earlier: #3547325 I didn't change back and completely screwed up my context on selectors....woops, thanks for pointing it out so this is more helpful to the next guy. – Exception

Answer 2

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);
    }    
   }
  })
 });

Ruddock

Answer 3

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

See here

Chirlin

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>
         ......

Turbulence