CODEWITHSUNDEEP
jqueryjquery-selectorsclosest
Lee
Lee

Reputation: 20944

jQuery closest TR selection

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.

Upvotes: 7

Views: 25488

Answers (4)

Tyler
Tyler

Reputation: 678

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

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630489

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.

Upvotes: 19

NicolasT
NicolasT

Reputation: 192

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

Upvotes: 2

fantactuka
fantactuka

Reputation: 3334

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

See here

Upvotes: 0

Related Questions