Jquery:Delete rows with animation effect ~ Web Speaks

Jquery:Delete rows with animation effect

Jquery owes its popularity to its beauty as well as power. This tutorial shows a combination of both. Here I have shown how to delete the records of a table in a stylish way with help of Jquery. Just single line of code performs the trick. Checkout the live demo.... Please write to me in case you want a help on this topic.

Live Demo Download Script

Table Structure

CREATE TABLE records(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);

Jquery Code

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
 $(".delete_button").click(function()
 {
 var id = $(this).attr("id");
 var dataString = 'id='+ id ;
 var parent = $(this).parent();
 
 $.ajax({
  type: "POST",
  url: "del.php",
  data: dataString,
  cache: false,
  success: function()
  {
   if(id % 2)
   {
    parent.fadeOut('slow', function() {$(this).remove();});
   }
   else
   {
    parent.slideUp('slow', function() {$(this).remove();});
   }
  }
 });
 
 return false;
 });
});
</script>
</head>

<body>
<?php include "../header.php"; ?>
<div id="main">
 <ol class="update">
  <?php
  include("../connect.php");
  $sql="select * from `records` order by `msg_id` desc";
  $result = mysql_query($sql);
  while($row=mysql_fetch_array($result))
  {
  $message=stripslashes($row["message"]);
  $msg_id=$row["msg_id"]; 
  ?>
   <li id="id2">
   <a class="link" href="<?=$message?>">
    <?php echo substr(substr($message,32),-strlen(substr($message,32)),-4); ?>
   </a>
   <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a>
   </li>
  <?php
  }
  ?>
 </ol>
</div>
</body>

del.php Code

<?php
include("../connect.php");
if($_POST['id'])
{
 $id=$_POST['id'];
 $id = mysql_escape_string($id);
 $sql = "delete from records where msg_id='$id'";
 //mysql_query( $sql);
}
?>

CSS Code

*{margin:0;padding:0;}
ol.update, ol.update li a.link
{
text-decoration:none;
color:#D02B55;
list-style:none;
font-size:18px;
}
ol.update li
{
height:50px; border-bottom:#dedede dashed 1px;
}
ol.update li:first-child
{
border-top:#dedede dashed 1px; height:50px;
}
#main
{
width:400px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
.delete_button
{
margin-left:10px;
font-weight:bold;
float:right;
}

Jquery:Delete rows with animation effect

Table Structure

Jquery Code

del.php Code

CSS Code

2 comments