Delete Records with Color Change Effect using jQuery and Ajax

Delete Records with Color Change Effect using jQuery and Ajax

jQuery code
Contains javascipt code. $(".delete_button").click(function(){}- delete_button is the class name of anchor tag (X). Using element.attr("id") calling delete button value.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.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: "deleteajax.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity:0.35 }, "slow");;
},
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});

}

});

return false;
});
});
</script>

deleteajax.php
Contains PHP code. Delete record from the database.

<?php
include("dbconfig.php");
if($_POST['id'])

{

$id=$_POST['id'];
$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>

CSS Code
You should use background-color here otherwise jquery.color.js could not work.

*{margin:0;padding:0;}

ol.update

{
list-style:none;font-size:1.2em;
}

ol.update li

{
height:50px; border-bottom:#dedede dashed 1px;background-color:#ffffff
}

#main

{
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}

.delete_button

{
margin-left:10px;
font-weight:bold;
float:right;
}