使用模态确认删除行

Question

我创建了一个简单的数据table，其中包括以下操作（编辑、删除）。

我已经在 删除按钮 中添加了确认删除 modal。

问题是当用户单击 "Yes" 时，这意味着删除，该行一直显示并且没有删除. 这是模态的 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">&#xE5CD;</i>
        </div>
        <h4 class="modal-title">Are you sure?</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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');
  });
});

我需要帮助来处理这个问题并知道我做错了什么。任何帮助将不胜感激。

谢谢！

Answer 1

我对你的基础做了如下修改code（删除了一些与问题无关的代码）：

$(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">&#xE5CD;</i>
          </div>
          <h4 class="modal-title">Are you sure?</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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">&times;</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">&times;</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();.

使用模态确认删除行

Delete rows using modal confirmation

html

jquery

modal-dialog

button