如何实现点击.delete按钮并确认后移除选中的.select-input对应元素？

我来帮你实现这个需求！你想要的是点击.delete按钮后弹出确认框，用户确认后删除所有被选中的.select-input对应的.item元素对吧？咱们先修正原代码里的逻辑问题，再给出完整的可运行方案：

修正后的代码 #

HTML 结构 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.21.1/sweetalert2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.21.1/sweetalert2.min.js"></script>

<button class="delete">delete</button>
<div class="post-list">
  <div class="item">
    <label>
      <input id="post-select1" type="checkbox" class="select-input" name="select-check">
    </label>
    1
  </div>
  <div class="item">
    <label>
      <input id="item2" type="checkbox" class="select-input" name="select-check">
    </label>
    2
  </div>
</div>

JavaScript 逻辑 #

$(".delete").click(function() {
  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this lorem ipsum!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    closeOnConfirm: false
  }).then(result => {
    if (result.value) {
      // 先执行删除操作：找到所有选中的复选框，移除它们的父级.item元素
      $(".post-list")
        .find(".select-input:checked")
        .closest(".item")
        .remove();
      // 再弹出删除成功的提示
      swal("Deleted!", "Your file has been deleted.", "success");
    } else if (result.dismiss === swal.DismissReason.cancel) {
      // 用户取消操作时的提示
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
  });
});

原代码的问题说明 #

原代码里有个逻辑错误：你把删除操作放在了swal("Deleted!", ...)的第二个参数里，但这并不是SweetAlert2的正确用法。在这个版本的SweetAlert2中，swal()返回的是Promise，我们需要在result.value为true的分支里，先完成删除操作，再调用成功提示弹窗。

另外几个关键细节：

• 使用closest(".item")可以精准定位到每个选中复选框所在的条目容器，避免误删其他无关元素
• 保留closeOnConfirm: false能确保确认弹窗不会自动关闭，直到我们完成删除操作并弹出成功提示

内容的提问来源于stack exchange，提问作者Kyle Underhill