jQuery: remove whole parent table

Question

Hi. I have images in seperate tables with Delete button and I would like to remove the table of which delete button was clicked.

I have tried $(this).closest("table").remove() and $(this).parents("table").remove() but without success. Nothing happens.

here's the HTML:

<table class='".($i % 2 ? "tbl_img_light" : "tbl_img_grey").">
<tr>
<th rowspan='2'>Image here</th>
<td>Description here
</tr>
<tr>
<td><button class='ad_del_img' value='$filename'>Delete</button></td>
</tr>
</table>

might look a tada messy, took it out of my php loops

and JS:
$(".ad_del_img").click(function() {
var file = $(this).val();
dataString = "file="+file;

//$(this).closest("table").remove();

$.ajax({
         type: "POST",
         url: 'controlUI/bin/delete_image.php',
         dataType : 'json',
         data: dataString,
         success: function(data)
         {
           alert("Success");
           $(this).closest("table").remove();
         },
         error: function(XMLHttpRequest, textStatus, errorThrown)
         {
           alert("Error");
         }
       });
return false;
});

Answer 1

$('button.ad_del_img').click(function()
{
   $(this).closest('table').remove();
});

For me the above code snippet is working perfectlly. If it still doesn't work, the error is probably somewhere else.

Oh, and in this method, the table header doesn't get deleted.......

Answer 2

The problem is context isn't maintained by default, but in jQuery 1.4+ you can specify a context, like this:

$.ajax({
  context: this,  //add this
  type: "POST",
  url: 'controlUI/bin/delete_image.php',
  dataType : 'json',
  data: dataString,
  success: function(data) {
    alert("Success");
    $(this).closest("table").remove();
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert("Error");
  }
});

The context option determines what this is when all of your event handlers for the $.ajax() request run, including success.