CODEWITHSUNDEEP
jquerysweetalert
Kyle Underhill
Kyle Underhill

Reputation: 109

sweetalert remove(); on confirmaition

I want to run the remove function on all checked .select-input when the .delete button is pressed and the confirmButton is clicked.

$(".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) {
      swal("Deleted!", "Your file has been deleted.", "success"),
        function(event) {
          event.preventDefault();
          $(".post-list")
            .find(".select-input:checked")
            .closest(".item")
            .remove();
        };
    } else if (
      // Read more about handling dismissals
      result.dismiss === swal.DismissReason.cancel
    ) {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
  });
});
<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>

Upvotes: 1

Views: 6097

Answers (1)

Serhat MERCAN
Serhat MERCAN

Reputation: 1098

First remove closeOnConfirm (it is moved into the button decleration, check this out; https://sweetalert.js.org/docs/#buttons ). Use swall.closeModal(); function for this parameter.

Second; for to check result value, use just result. Also, I prefer to use result==true. I think, it is better than only result.

I hope this will help you...

$(".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!",
  }).then(result => {
    swal("Deleted!", "Your file has been deleted.", "success");
    if (result.value) {
      $(".post-list")
      .find(".select-input:checked")
      .closest(".item")
      .remove();
    } else if (
      // Read more about handling dismissals
      result.dismiss === swal.DismissReason.cancel
    ) {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
    swall.closeModal();
  });
});
<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>

Upvotes: 2

Related Questions