jQuery: hide table row - php

Question

This is the function that is called when button delete is pressed. After confirmation of delete, I want to hide the delete tr :
function delete_confirmation(id) {
var $tr = $(this).closest('tr');
swal({
title: "Are you sure?",
text: "To delete this patient!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
$.ajax({
url: localStorage.getItem("base_url") + '' + 'index.php/Patient_ws/delete/',
timeout: 4000,
type: "POST",
data: ({id: id}),
}).done(function () {
$tr.remove();
})
.fail(function () {
swal({
title: ' erreur in server, try later...',
type: 'warning'
})
})
} else {
swal("Patient not deleted");
}
});
}
Html markup:
<a href="#" class="btn btn-danger btn-xs" onclick="delete_confirmation(<?php echo $patient->id_personne;?>)">
<i class="fa fa-trash-o"></i> Delete </a>
I want to hide tr - please help.

Answer 1

There is no explicit this in an onclick function unless you pass it in from the html. Try console.log(this) will see it is probably Window and not the element
Since you are already using jQuery I would suggest also using it for the event listener and moving the php output to a data attribute
HTML
<a class="delete-row-btn btn btn-danger btn-xs"
data-id="<?php echo $patient->id_personne;?>">
JS
$(document).on('click','.delete-row-btn', delete_confirmation)
function delete_confirmation(event) {
event.preventDefault();
// now `this` is the button
var id = $(this).data('id')
var $tr = $(this).closest('tr');
// all else should be same
swal({
.....
}