Delete A specific row from table using id and refresh the same table in background using Jquery Ajax php mysql

Question

I build a dynamic html table which fetch data from mysql table . i can able to display the table content . but when i'm trying to delete 2nd,3rd, 4th,..etc row ( any row other than the 1st one) always my first row only getting deleted

Here is my table

{
 $staff=mysqli_query($con,"SELECT * FROM staff_port");
 echo " <form id='form_id' method='javascript:void(0);'>";
 while($staff_data=mysqli_fetch_array($staff)) 
{ 
 echo "<div id='next'><tbody>
 <tr class='even pointer'>
 <td class=' '>&nbsp;<i class='fa fa-check-circle green'></i></td>
 <td class=' '><a href='#' target='_blank'><i class='fa fa-file-pdf-o blue'>
 </i> ".$staff_data['name']."</td>
 <td class=' '>".$staff_data['email']."</td>
 <td class=' '>".$staff_data['uid']."</td>
 <td class=' '>Thrissur</td>
 <td class=' '>IT Developer</td>
 <td class='last'><input type='text' class='hidden' name='usridl' id='usrid' value='".$staff_data['id']."'>
 <a href='javascript:void(0);' id='dltbutton' name='btn-dlt'  onclick='user_delete();'><i class='fa fa-trash red'></i></a>
 </td>
 </tr>
 </tbody></div>";
} 
}

i'm using jquery / ajax as post action

function user_delete() 
{
   if(confirm("Do you really want to delete record ?"))
      {
        var usrid = $("#usrid").val();
{
    var dataString = 'userid=' + usrid + '&page=delete';
    $.ajax({
        type: "POST",
        url: "include/classes/staff-dlt.php",
        data: dataString,
        cache: false,
        beforeSend: function() 
        {
            $("#next").html('<img src="include/images/loading.gif"/>');

        },
 success: function (res) {
                             if(res=='1')
                             {
                                $('#next').html(res);
                             }

                             if(res=='2')
                             {  
                                 $('#next').html(res);
                             }
                        }
    });
}
}}

And my php code for deleting rows

<?php
include "db-config.php";
if(isset($_POST["page"]) && $_POST["page"] == "delete") 
{
$id=$_POST['userid'];
$sqld="DELETE FROM staff_port WHERE id=".$id;
if(mysqli_query($con,$sqld))
{
    echo "1";
}
else
    echo "2";
}
?>

Why always my first row getting deleted even when i click the delete button of my last row !

i want to execute the deletion in background .

Answer 1

The issue here is: You are using your ID for the elements in a while-loop. So you end up having multiple IDs in your document, which is invalid. So jQuery will always get the first one.

I would suggest the following:

• get rid of the inline onClick -handler and use a proper event-handler
• use a class - selector instead of ID
• save your usrid -value to the element your are clicking on

Your code would be as follows:

HTML

<input type='text' class='hidden' name='usridl' id='usrid' value='".$staff_data['id']."' />
<a href='javascript:void(0);' class='delete-row' id='dltbutton' name='btn-dlt' data-usrid='".$staff_data['id']."'><i class='fa fa-trash red'></i></a>

JS

$('.delete-row').on('click', function(){
    if(confirm("Do you really want to delete record ?"))
      {
          var usrid = $(this).data('usrid');
          //all your other stuff
       }
});

---

Example

Answer 2

Specifically in DOM structure every element should be unique ie the ID attribute of two HTML elements should not be same. In order to delete particular row for HTML table, after AJAX deletes row from database, simply remove table row referencing with its unique id attribute. Instead of refreshing the HTML rows after delete. Just check if row is successfully deleted with AJAX call, and remove the row from HTML table.

During creation of page, use some logic for assigning unique ID attributes to each row in HTML table.

<tr id="row-<?php $row["id"]; ?>"><td></td></tr>

this will create every row unique in DOM and row can be referenced to delete using jquery as well. And output will be something similar.

<tr id="row-1">
<tr id="row-2">
<tr id="row-3">

Answer 3

Your better php code for deleting may be like this:

<?php 
  include "db-config.php";

  if(isset($_POST["page"]) && isset($_POST["userid"]) && $_POST["page"] =="delete") {
      $id=$_POST['userid'];
      $sqld="DELETE FROM staff_port WHERE id='$id'";
      $query=mysqli_query($con,$sqld);

      if($query) {
            echo "1";
      } else {
            echo "2";
      }
  }
?>