I have a piece of code that delete a record and reload dataTable. I want to animate this action as such that on click the button the record of dataTable fade out and then delete from Data Base. this is my code:

 $(document).on('click', '.delete', function() {
        var _id = $(this).attr("id");
        data._id = $(this).attr("id");
        data.operation = "deleteorderdetail";
        // alert(data.operation);
        if (confirm("Are you sure?")) {
            $.ajax({
                url: 'delete.php',
                method: 'POST',
                data,
                success: function(data) {
                    $(this).parentsUntil("tr").hide(1000); -----> not work !                        
                    dataTable.ajax.reload();
                }
            });
        } else {
            return false;
        }

Best regards....

CodePudding user response：

for Datatable try this may help you try like this

   var row = $(this).closest('tr');
                        row.fadeOut(400, function () {
                            dataTable.row(row).remove().draw(false);
                        });

 $(document).on('click', '.delete', function() {
        var _id = $(this).attr("id");
        data._id = $(this).attr("id");
        data.operation = "deleteorderdetail";
        // alert(data.operation);
        if (confirm("Are you sure?")) {
            $.ajax({
                url: 'delete.php',
                method: 'POST',
                data,
                success: function(data) {
                  var row = $(this).closest('tr');
                    row.fadeOut(400, function () {
                        dataTable.row(row).remove().draw(false);
                    });
                }
            });
        } else {
            return false;
        }

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can make the following changes to your approach:

1. Capture the clicked item into its own variable:

var clickedItem = $(this);

2. Use this clicked item when you select the row to be hidden.

3. Instead of using parentsUntil, use closest. Using parentsUntil will select every ancestor from your clicked object up to but not including the selected element (the <tr> in your case). I assume that what you want is to hide the entire row.

The reason for performing step 1: If you try to use $(this).closest("tr").hide(1000);, then $(this) will refer to the jQuery Ajax object in which $(this) is located.

The end result:

$(document).on('click', '.delete', function() {
  var clickedItem = $(this); // capture clicked item
  var _id = $(this).attr("id");
  data._id = $(this).attr("id");
  data.operation = "deleteorderdetail";
  if (confirm("Are you sure?")) {
    $.ajax({
      url: 'delete.php',
      method: 'POST',
      data,
      success: function(data) {
        clickedItem.closest("tr").hide(1000); // use clicked item                 
        dataTable.ajax.reload();
      }
    });
  } else {
    return false;
  }
});