Remove a table row after ajax success
In this case we can create a closure variable to hold the reference to the row to be deleted
$("body").on("click", "#response table td a.del_button", function(e) {
e.returnValue = false;
var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete='+ DbNumberID; //build a post data structure
//console.log(myData);
var $tr = $(this).closest('tr'); //here we hold a reference to the clicked tr which will be later used to delete the row
$("#delete_this_user").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
//$row.remove();
$(this).dialog( "close" );
$.ajax({
type: "POST", // HTTP method POST or GET
url: "process.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
//on success, hide element user wants to delete.
$tr.find('td').fadeOut(1000,function(){
$tr.remove();
});
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
},
"no": function() {
$(this).dialog( "close" );
}
}
});
});