Question

I’ve created a page that lists information in a table, this information comes from a database and is userspecific, the user can delete the info.
I have the following HTML (more rows in live offcourse):

<table>
  <tr>
    <td>INFORMATION TYPE 1</td>
    <td><img src="img/delete.gif" class="delete" id="8934" /></td>
  </tr>
  <tr>
    <td>INFORMATION TYPE 2</td>
    <td><img src="img/delete.gif" class="delete" id="1234" /></td>
  </tr>
</table>

And this jQuery script:

$(document).ready(function(){
  $('img.delete').click(function(){
    $.ajax({
      type: 'GET',
      url: 'inc/ajax.php',
      data: 'script=delauth&aid='+ $(this).attr('id'),
      success: function(){
        $(this).parent().parent().remove();
      }
    });
  });
});

When I click the delete-image the PHP-script get’s called and executes as it is supposed to, the record is removed from the database but the tablerow remains.

If I use this code (no ajax-call):

$(document).ready(function(){
  $('img.delete').click(function(){
    $(this).parent().parent().remove();
  });
});

the tablerow removes itself when I click the delete-image.

As far as I can see the object isn’t available within the function. I’ve tried alerting the id instead of removing the tablerow but then the alertmessage says undefined.

What am I doing wrong? Can somebody help me?

Thanks!

Answer 1

Could be an issue with the context of this changing by the time ajax success is called.
Change your code to as follows:

$(document).ready(function() {
    $('img.delete').click(function() {
var $this = $(this); //Store the context of this in a local variable 
        $.ajax({
            type: 'GET',
            url: 'inc/ajax.php',
            data: 'script=delauth&aid=' + $this.attr('id'),
            success: function() {
                $this.closest("tr").remove(); //This is much better
                //$this.parent().parent().remove();
            }
        });
    });
});