jQuery: remove whole parent table

I have images in separate 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 succ开发者_如何学Cess. 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>

It might look 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;
});

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.

$('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.......