Below is code that I'm using to add specific input values that a user enters in a modal, to a table using JQuery, in each row a delete button $('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover") is also generated, however I am struggling with actually deleting the desired row in the table.
if ($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== '') {
var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, 'images/');
let row = '<tr> <td class="align-middle">' + "image" + '</td> <td class="align-middle">' + $("#insert-name").val() + '</td> <td class="align-middle">' + $("#insert-surname").val() + '</td> <td class="align-middle">' + "edit" + '</td> <td class="align-middle">' + "delete" + '</td> </tr>'
$('tbody').append(row);
$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image' data-toggle='popover-hover'>");
$('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover").on('click', function() {});
$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
$("#delete-modal").modal('show');
$("#btnDeleteConfirmation").on('click', function() {
$(this).parents('tr').remove();
$("#delete-modal").modal('hide');
});
});
}
});
The HTML code for the table and delete modal is:
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Delete Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnDeleteDismiss">No</button>
<button type="button" class="btn btn-primary" id="btnDeleteConfirmation">Yes</button>
</div>
</div>
</div>
</div>
When the delete button of a specific row is clicked a modal #delete-modal is displayed which prompts the user to confirm if they want to delete the desired row, only if the user clicks yes on the modal #btnDeleteConfirmation should the row be deleted. My attempt of this is below but it doesn't actually delete anything and I am not sure what I am doing wrong.
$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
$("#delete-modal").modal('show');
$("#btnDeleteConfirmation").on('click', function() {
$(this).parents('tr').remove();
$("#delete-modal").modal('hide');
});
});
Any help would be much appreciated.
You are taking the this reference wrong. btnDeleteConfirmation doesnot have a parent tr hence its not working. What you need is to store the this reference of this line.
$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
let deleteRef = this;
Then when you pass it with parent('tr').remove(), it shall work!