delete table row using jQuery within ajax statement

Question

I want to delete a row from the table, but the success part of ajax does not execute.

function fn_delete() {
    $("a.delete").click(function () {
        idProduct = $(this).parents("tr").find("td").eq(1).html();
        $.ajax({
            type: "POST",
            url: "DeleteProduct",
            data: { idProduct },
            success: function () {
                $(this).parents("tr").fadeOut("normal", function () {
                $(this).remove();
            }
        });
    });
};

Answer 1

this inside your success callback will not be the same as this in the code that makes the ajax call, unless you explicitly set the context :

$.ajax({
  context: this,
  data: ...
});

Answer 2

I don't think this is giving the value that you're expecting.

Try this:

function fn_delete() {
$("a.delete").click(function () {
    idProduct = $(this).parents("tr").find("td").eq(1).html();
    var myRow = $(this).parents("tr");
    $.ajax({
        type: "POST",
        url: "DeleteProduct",
        data: { idProduct },
        success: function () {
                $(this).parents("tr").fadeOut("normal", function () {
                myRow.remove();
            });
        }
    });
});