Some days back I had posted "Delete a Record with animation fade-out effect using jQuery and Ajax". In this post I want to explain delete records with random animation(slideup and fadeout) effect using jQuery framework. Very simple code just 10 lines. Take a look at live demo.
Download Script 
Live DemoDatabase Table Code
A simple database table two columns msg_id and message.
CREATE TABLE updates(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
delete_random.php
Contains PHP code displaying records from database. Take a look at class="delete_button"
<ol class="update">
<?php
include("dbconfig.php");$sql="select * from updates 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>
<?php echo $message; ?> <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a>
</li>
<?php
}?>
</ol>
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. If id value is even number if(id(even) % 2) = If(0) false
<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: "deleteajax.php",
data: dataString,
cache: false,
success: function()
{
if(id % 2)
});
return false;
});
});
</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,
success: function()
{
if(id % 2)
{
parent.fadeOut('slow', function() {$(this).remove();});}
else
{
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 = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>
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
*{margin:0;padding:0;}
list-style:none;font-size:1.2em;
}
height:50px; border-bottom:#dedede dashed 1px;
}
border-top:#dedede dashed 1px; height:50px;
}
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
margin-left:10px;
font-weight:bold;
float:right;
}
ol.update
{list-style:none;font-size:1.2em;
}
ol.update li
{ height:50px; border-bottom:#dedede dashed 1px;
}
ol.update li:first-child
{ border-top:#dedede dashed 1px; height:50px;
}
#main
{width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
.delete_button
{margin-left:10px;
font-weight:bold;
float:right;
}
Great thank for ur support!
on "deleteajax.php" the variable "$id" id equal to "id=2" for instance. I think it will trigger a sintax error. Am I right?
@Eduardo de Matos
No.........
Eg : $id = 1 -> 1 % 2 = 1 ---> if(1) means true...
Eg : $id = 2 -> 2 % 2 = 0 ---> if(0) means false..
Eg : $id = 3 -> 3 % 2 = 1 ---> if(1) means true.....
.
.
.
.
@Srinivas
I mean the variable "$id" on the SQL query
Doesn't seem random to me.... I can predict exactly which animation will play!
Hello Srinivas.
Nice article!
I was just trying to download this but it seems the downloaded index file and the code you have given here is pretty different.
Neither i find delete_random.php file nor the jquery code you have given here.
Do you think is this the same zip file or code for this article? Or can you give me the link where i can find the zip file for this module?
Regards!
Hello again!
I am sorry. i should have checked it properly into my index page.:( everything is there.
And yeah its working.
great script!
Well it's a good script, but can i recover a deleted record ?
In my opinion the script need an alert, to verify the action...
@Manuel
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax
({.......................... });
}
More information
Delete a Record with animation fade-out effect using jQuery and Ajax.
Mysql row won't delete. Very strange installed the tables right. Included config file but the deletion won't work. The database ids are exactly the same as in the url. How to fix this?
mySQL could not delete the attribute..why?
why deletion doesn't work?
Live Demo in free PHP hosting : No database connetion.
nice, from tunisia ;)
For some reason this example does not reach the deleteajax.php file for me. I have inserted logging to debug the issue, but the logging I placed outside of the call works while the logging within the call to the deleteajax is never written.
Hi there...
Ur code help me al ot..
but i've 1 prob...
i use paginaton for this delete code...
Let say if in 1 page there is 10 records, when I delete 1 record, the page display 9 records.
What should I add in the code to make the list refresh and list 10 records.
great work here my friend..........
ur tutorials seems easy to learn and is making me a jquery fan...........
thank you for this wonderful work.........
awesome stuff, how would you code this so it only displays 5 rows and as you delete a row it will autofill if there are more than 5 rows?
Thank you very much, this is working great!
I subscribe to some of the problems already mentioned. But the main comment i have to make is that if these ARE tutorials (as asserted) then there is an amazing lack of comment & explanation!!!!
It's really nice...
working great!
I just, mix Pagination and Delete Records together but it not working any idea how to do this
In order to use pagination and delete records, once the data has been deleted you must refresh page so it shows the LIMIT again, lets say 10.
simple javascript will do.
history.go(0)
Srinivas done great job explainning this tutorial, hope you all get it.
There are lots of ajax[delete] code exist on web, but doesn't work properly. Thanks for this helpful article. Really Nice.
Best Regards From TURKEY.
Boy... kudos to you! you posts are very useful!!
Hi,
script works, it reaches the AJAX script and deletes the item. BUT the item is still present in the list until I refresh the site...
How would you pass more variables than user_id to the delete.php page?
@Above Comment:
You can use below code to pass more variables
var dataString = 'id='+ id + '&name=' + name + '&add=' +add; // So on...
Awesome tutorial. I've successfully added it to my project.
Thanks!
Tim
nice ! i have more simple code for delete data with AJAX and JQuery .. :) I hope you see..
http://simplycdesign.blogspot.com/2011/06/delete-data-dengan-ajax-dan-jquery.html
how to used two var
I have code
[tr][td]blabla[/td][td]blabla[/td][td]blabla[/td][td]blabla[/td][td]< a c lass = "delete_button" i d="id; ?>" href="#">[/td][/tr]
How is remode < tr >
(sorry, I now little english )
its urgent please I did every thing ok but my delete_random.php doesn't pass me to deleteajax.php.
whats going wrong?