I have created a simple data table which include the following actions (Edit,Delete).
I have added to the delete button a confirmation deletion in a modal.
The problem is when the user click on "Yes" which means delete, the row keeps showing and did not removed. Here is the HTML code of the modal:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<div class="modal-header">
<div class="icon-box">
<i class="material-icons"></i>
</div>
<h4 class="modal-title">Are you sure?</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Do you really want to delete these records? This process cannot be undone.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="btnDelteYes">Delete</button>
</div>
</div>
</div>
</div>
Here is the jQuery code of Delete button:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
$(".data-table tbody").append("<tr data-name='" + name + "' data-email='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button id='test5' class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btnDelete' id='test6'>Delete</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on('click', '.btn.btnDelete', function() {
var id = $(this).closest('tr').data('id');
$('#myModal').data('id', id).modal('show');
});
$("body").on("click", function() {
$("#btnDelteYes").parents("tr").remove();
$('#myModal').modal('hide');
});
});
I need a help to deal with this issue and to know what i am doing wrong. Any help would be appreciated.
Thank you!