Question

I want to delete some data displayed in a HTML table row (first on the database and then remove from the HTML table). I have added a delete link to each HTML table row, and when this link is clicked, I want first to make a jQuery $.get to update the database, and if that returns successful, then I want to remove the HTML row. I have gotten each part working successfully separately, but when I try to combine them, I run into trouble. When combined, the part that makes the AJAX call to update the database works, but not the part that does the $(this).remove(). I can see that, at the moment of calling $(this).remove(), the value of $(this) is referring to the $.get, when I know I need it to be referring to “.delete_link”. But I don’t see how I can change that. Clearly I’m struggling with some of the fundamentals of jQuery. I tried breaking each part up into component functions, but that seemed to make things even worse.

  $(document).ready(function() {
    $(".delete_link").click(function () {
      if (confirm('Are you sure???')) {
        $.get("/comments/ajax-delete-comment?comment_id=4220537", function(response) {
            if (response == 1) {
              alert("Couldn't update database");
            } else {
              $(this).closest('tr').fadeTo(400, 0, function () {
                $(this).remove();
              });
            }
        });


        return false;
      }
      return false;
    });
  });

Answer 1

Simply capture this in a variable.

if (confirm('Are you sure???')) {
    var that = $(this);
    $.get("/comments/ajax-delete-comment?comment_id=4220537", function(response) {
        if (response == 1) {
            alert("Couldn't update database");
        } else {
            that.closest('tr').fadeTo(400, 0, function() {
                $(this).remove();
            });
        }
    });


    return false;
}​