Sweet Alert Confirm Delete Example

index.html

<div class="container">
  <h1>Sweet Alert Confirm Delete Example</h1>
  
  <table class="table table-bordered data -table">
    <thead>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="demo">
      
    </tbody>
  </table> 
</div>

script.js

var names = [
  {
    id: 1,
    name: "edward",
    email: 'edward@io.com'
  },
  {
    id: 2,
    name: "edward lorem",
    email: 'edwardlorilla@io.com'
  }
  ];


let NLen = names.length

function tableInsert(){
  
  let text = ""
  
  
  NLen = names.length;
  
  
  
  
  for (let i = 0; i < NLen; i++) {
    text += "<tr>";
    text += "<td>" + names[i].id + "</td>";
    text += "<td>" + names[i].name + "</td>";
    text += "<td>" + names[i].email + "</td>";
    text += "<td>" + 
      
      `
      <button class="btn btn-xs btn-danger btn-flat show_confirm" data-toggle="tooltip"
      onclick="show_confirm(${i})"
      data-index-number="${i}"
      title='Delete'>Delete</button>
      
      `
    
    + "</td>";
    text += "</tr>";
    
    
    
  }
  
  document.getElementById("demo").innerHTML = text;  
}

tableInsert()

function show_confirm(id) {
  
  var index = id
  
  swal({
    title: `Are you sure you want to delete this record?`,
    text: "If you delete this, it will be gone forever.",
    icon: "warning",
    buttons: true,
    dangerMode: true,
  })
  .then((willDelete) => {
    
    if (willDelete) {
      names.splice(parseInt(index), 1 )
      tableInsert()
    }
  });
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

sweet-alert-confirm-delete-example.markdown

Sweet Alert Confirm Delete Example

A Pen by Edward Lance Lorilla on CodePen.

License.