我创建了一个简单的数据表，其中包括以下操作（编辑，删除）。
我已在模式中将确认删除添加到删除按钮。
问题是，当用户单击“是”时，这表示删除，该行一直显示并且未被删除。这是模式的HTML代码：
<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>
这里是删除按钮的jQuery代码：
$(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');
});
});
我需要帮助来解决这个问题，并知道我在做什么错。任何帮助，将不胜感激。
谢谢！
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
var trLen = $(".data-table").find("tr").length;
$(".data-table tbody").append("<tr data-name='" + name + "' data-email='" + email + "'><td>" + name + "</td><td>" + email + "</td><td><button id='edit" + trLen + "' class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btnDelete' id='delete" + trLen + "'>Delete</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on('click', '.btn.btnDelete', function() {
var id = $(this).attr('id');
$('#myModal').data('id', id).modal('show');
});
$("body").on('click', '#btnDelteYes', function() {
var id = $('#myModal').data('id');
$('#' + id).parents("tr").remove();
$('#myModal').modal('hide');
});
});.navbar-nav>li {
padding-left: 30px;
padding-right: 30px;
}
.navbar-nav>li {
margin-left: 30px;
margin-right: 30px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<body>
<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>
<div class="container">
<form>
<div class="form-group">
<div class="form-group">
<h2><span class="badge badge-secondary">Full Name*</span></h2>
<input type="text" name="name" class="form-control" value="Julien" required="">
<div class="alert alert-warning alert-dismissible fade show">
<strong>Warning!</strong> Please the Fullname field is required.
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
</div>
<div class="form-group">
<h2><span class="badge badge-dark">Email*</span></h2>
<input type="text" name="email" class="form-control" value="julien@gmail" required="">
</div>
<div class="alert alert-warning alert-dismissible fade show">
<strong>Warning!</strong> Please the Email field is required.
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
</div>
<button type="submit" class="btn float-right mb-3 mr-2">
<i class="text-success fas fa-plus fa-2x"></i>
</button>
</form>
<br/>
<table class="table table-bordered data-table">
<thead>
<th>Name</th>
<th>Email</th>
<th>Options</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>首先，您的所有按钮ID均相同，必须唯一。第二，当您单击删除按钮时，id目标错误。因此将var id = $(this).closest('tr').data('id')更改为var id = $(this).attr('id');[第三，当您单击确认删除按钮时，尽管您正确地获得了
id，但并未使用它。因此将$('#btnDelteYes').parents("tr").remove();更改为$('#' + id).parents("tr").remove();。