Question

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

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

Answer 1

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.