How to delete row form ajax when it is deleted - php

Question

hello i am trying to delete a row with check box delete when i delete any record it is deleting from database and i can see with refreshing page.
I want to delete the row without refresh how can i achieve that:
This is my listing code:
<tbody>
<?php while($staffResults=$staffQuery->fetch_assoc()){ ?>
<tr>
<td><input type="checkbox" class="staff-list" name="checked" value="<?php echo $staffResults['id_staff']; ?>"></td>
<td><?php echo $staffResults['staff_name']; ?></td>
<td><?php echo $staffResults['staff_email']; ?></td>
<td><?php echo $staffResults['staff_phone']; ?></td>
<td><?php $datetime = $staffResults['staff_registered'];
echo date("d-m-Y", strtotime($datetime)); ?></td>
</tr>
<?php } ?>
</tbody>
And delete button:
<button type="button" id="deleteStaffList" class="btn btn-sm btn-default" title="Remove"><i class="fa fa-trash-o"></i></button>
Here is my script and ajax code.
<script language="JavaScript">
$("#deleteStaffList").click(function()
{
$("#delshowMessageDiv").hide();
$("#delshowMessage").html('');
var deleteStaffList = $('.staff-list:checkbox:checked').map(function(){
return $(this).attr('value');
}).get().join(",");
console.log(deleteStaffList);
$.ajax({
url: "staffcontroller.php",
method: "POST",
data: { delData : deleteStaffList, 'action':'delete'},
dataType: "json",
success: function (response) {
if(response["success"]==true)
{
$("#delshowMessageDiv").hide();
$("#delshowSuccessMessageDiv").show();
$("#delshowSuccessMessage").html(response["message"]);
}else{
$("#delshowMessageDiv").show();
$("#delshowMessage").html(response["message"]);
}
},
error: function (request, status, error) {
$("#delshowMessageDiv").show();
$("#delshowMessage").html("OOPS! Something Went Wrong Please Try After Sometime!");
}
});
return false;
});
</script>

Answer 1

You can place 3 lines as follows: (// new lines -there comment- // till here)
<script language="JavaScript">
$("#deleteStaffList").click(function()
{
$("#delshowMessageDiv").hide();
$("#delshowMessage").html('');
var deleteStaffList = $('.staff-list:checkbox:checked').map(function(){
return $(this).attr('value');
}).get().join(",");
console.log(deleteStaffList);
$.ajax({
url: "staffcontroller.php",
method: "POST",
data: { delData : deleteStaffList, 'action':'delete'},
dataType: "json",
success: function (response) {
if(response["success"]==true)
{
$("#delshowMessageDiv").hide();
$("#delshowSuccessMessageDiv").show();
$("#delshowSuccessMessage").html(response["message"]);
}else{
$("#delshowMessageDiv").show();
$("#delshowMessage").html(response["message"]);
// new lines
$('.staff-list:checkbox:checked').each(function(i,e){
$(this).parents('tr').remove();
})
// till here
}
},
error: function (request, status, error) {
$("#delshowMessageDiv").show();
$("#delshowMessage").html("OOPS! Something Went Wrong Please Try After Sometime!");
}
});
return false;
});
</script>