Remove row from table with fadeOut effect using jquery and php

In this post i have explain about How to Remove row from table with fadeOut effect using jquery and php. Here i have used ajax to delete the database record. It will work without refresh page and row table data delete with fadeOut effect.

Live Demo Download

Database

Create sample table 'user' and insert some value.

CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL,
  `name` varchar(150) NOT NULL,
  `email` varchar(150) NOT NULL,
);

HTML

Form id="user_add" - get all form attribute data value in ajax.

data-id="1" - store in data value in form element.

<html>
<body>
<form id="user_add">
    <label>Name</label>
    <input name="name" required type="text">
    <label>Email</label>
    <input name="email" required type="text">
    <input type="submit" name="submit">
</form>
<h3>User information</h3>
<div align="center">
<table border="1" class="mains">
<tr>
    <td>Name</td>
    <td>Email</td>
    <td>Action</td>
</tr>
<?php
$db = new mysqli('localhost', 'root', '', '1next2');
$view_user = $db->query("SELECT * FROM user"); $i=1;
foreach ($view_user as $key => $users): ?>
<tr>
    <td><?php echo $users['name'] ?></td>
    <td><?php echo $users['email'] ?></td>
    <td>
    <a data-id="<?php echo $users['id'] ?>" class="delete" href="#">Delete</a>
    </td>
</tr>
<?php
endforeach;
?>
</table>
</div>
</div>
</body>
</html>

Jquery

function data-id value post in ajax-delete.php

<script>
$(document).on('click','.delete',function(){
var element = $(this);
var del_id = element.attr("data-id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
 $.ajax({
   type: "POST",
   url: "ajax_delete.php",
   data: info,
   success: function(){

 }
});
  $(this).parents("tr").animate({ backgroundColor: "#003" }, "slow")
  .animate({ opacity: "hide" }, "slow");
 }
return false;
});
</script>

ajax_delete.php

<?php 
if($_POST['id']!=""):
    extract($_POST);
    $id=mysqli_real_escape_string($db,$id);
    $sql = $db->query("DELETE FROM user WHERE id='$id'");
endif;
?>

"You see, God helps only people who work hard. That principle is very clear."

- A. P. J. Abdul Kalam

Menu Link

08 September, 2015