如何使用javascript和php mysql删除一行

Question

I'm having a problem sending the id from javascript and send it to the php to delete the selected row. It seems

I am fine here since it is printing each row a delete button but unfortunately each time i click the delete button it is not deleting the row.

my javascript code is

$(document).ready(function(){

 function fetch_product_data()
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   dataType:"json",
   success:function(data)
   {
    for(var count=0; count<data.length; count++)
    {
     var html_data = '<tr><td><button type="button" name="delete" class="btn btn-danger btn-xs delete" data-pk="'+data[count].id+'">Delete</button></td>';
     html_data += '<td data-name="productArea" class="productArea" data-type="text" data-pk="'+data[count].id+'">'+data[count].productArea+'</td>';
     html_data += '<td data-name="productLongName" class="productLongName" data-type="text" data-pk="'+data[count].id+'">'+data[count].productLongName+'</td>';
     html_data += '<td data-name="productShortName" class="productShortName" data-type="text" data-pk="'+data[count].id+'">'+data[count].productShortName+'</td>';
     html_data += '<td data-name="documentName" class="documentName" data-type="text" data-pk="'+data[count].id+'">'+data[count].documentName+'</td>';
     html_data += '<td data-name="docID" class="docID" data-type="text" data-pk="'+data[count].id+'">'+data[count].docID+'</td>';
     html_data += '<td data-name="author" class="author" data-type="text" data-pk="'+data[count].id+'">'+data[count].author+'</td>';
     html_data += '<td data-name="supportedFormat" class="supportedFormat" data-type="checklist" data-pk="'+data[count].id+'">'+data[count].supportedFormat+'</td>';
    html_data += '<td data-name="whereToFind" class="whereToFind" data-type="checklist" data-pk="'+data[count].id+'">'+data[count].whereToFind+'</td>';

     $('#product_data').append(html_data);
    }
   }
  })
 }

 fetch_product_data();

delete js. it is not deleting and not updating as well. I'm not sure if i passed the ID properly that's why it is not deleting after all.

   $(document).on('click', '.delete', function(){
   var id = $(this).attr("id");
   if(confirm("Are you sure you want to remove this?"))
   {
    $.ajax({
     url:"delete.php",
     method:"POST",
     data:{id:id},
     success:function(data){
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#product_data').destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
  });

the delete function is im not sure as well. delete.php

<?php
$connect = mysqli_connect("localhost", "root", "", "infodev");
if(isset($_POST["pk"]))
{
 $query = "DELETE FROM product WHERE id = '".$_POST["pk"]."'";
 if(mysqli_query($connect, $query))
 {
  echo 'Data Deleted';
 }
}
?>

Answer 1

You are sending id from your Ajax call and retrieving $_POST["pk"] in your php function. That's an error. You should do:

<?php
$connect = mysqli_connect("localhost", "root", "", "infodev");
if(isset($_POST["id"]))
{
 $query = "DELETE FROM product WHERE id = '".$_POST["id"]."'";
 if(mysqli_query($connect, $query))
  {
  echo 'Data Deleted';
  }
}
?>