There are many things you can do with AJAX to improve the user experience, for example, Add, edit or delete the record and update layout without reloading the page.
With only PHP you can easily delete records but require to submit the page or send value by URL and according to it delete a record.
This works and removes the record but it reloads the page every time.
You can do this with jQuery AJAX where you need to pass the record id from AJAX which needs to delete.
In the demonstration, I am creating the HTML table which shows the list of records with a delete button. When the button gets clicked then remove the record and also remove HTML table row with fadeOut() effect.

1. Table structure

I am using posts Table.

CREATE TABLE `posts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `content` text NOT NULL,
  `link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a config.php file for database connection.
Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. HTML

List records from posts table in the <table >.
Here, I add the <span class='delete'> for deleting the record and use the record id to define value of id attribute.
Completed Code

 <div class='container'>
 <table border='1' >
  <tr style='background: whitesmoke;'>
   <th>S.no</th>
   <th>Title</th>
   <th>Operation</th>
  </tr>

  <?php 
  $query = "SELECT * FROM posts";
  $result = mysqli_query($con,$query);

  $count = 1;
  while($row = mysqli_fetch_array($result) ){
    $id = $row['id'];
    $title = $row['title'];
    $link = $row['link'];

  ?>
    <tr>
     <td align='center'><?php echo $count; ?></td>
     <td><a href='<?php echo $link; ?>'><?php echo $title; ?></a></td>
     <td align='center'>
       <span class='delete' id='del_<?php echo $id; ?>'>Delete</span>
     </td>
    </tr>
  <?php
   $count++;
  }
 ?>
 </table>
</div>

4. PHP

Create a remove.php file.
Read POST id.
Check if a record exists or not in the posts table. If exists then execute Delete query on the id.
echo 1 for return.
If not deleted then echo 0 for return.
Completed Code

<?php 
include "config.php";

$id = $_POST['id'];

if($id > 0){

  // Check record exists
  $checkRecord = mysqli_query($con,"SELECT * FROM posts WHERE id=".$id);
  $totalrows = mysqli_num_rows($checkRecord);

  if($totalrows > 0){
    // Delete record
    $query = "DELETE FROM posts WHERE id=".$id;
    mysqli_query($con,$query);
    echo 1;
    exit;
  }
}

echo 0;
exit;

5. jQuery

Define click event on delete class.
Get delete id by splitting the element id and sending this in AJAX request. On AJAX successfully callback check response.
If response == 1 then remove a row using remove() and use fadeOut() effect to add some delay.
If response != 1 then alert('Invalid ID.');.
Completed Code

$(document).ready(function(){

 // Delete 
 $('.delete').click(function(){
   var el = this;
   var id = this.id;
   var splitid = id.split("_");

   // Delete id
   var deleteid = splitid[1];
 
   // AJAX Request
   $.ajax({
     url: 'remove.php',
     type: 'POST',
     data: { id:deleteid },
     success: function(response){

       if(response == 1){
  // Remove row from HTML Table
  $(el).closest('tr').css('background','tomato');
  $(el).closest('tr').fadeOut(800,function(){
     $(this).remove();
  });
      }else{
  alert('Invalid ID.');
      }

    }
   });

 });

});

6. Conclusion

In this post, I explained how you can use AJAX to delete existing records from MySQL Table. I used it with HTML table in the demonstration you can also use it with <div>, <ul>, etc. elements.