Wall Script
Follow Me:
Sunday, January 18, 2009

Delete a Record with animation fade-out effect using jQuery and Ajax.

Are you like Twitter and Yammer API? This post about how to delete a record with animation fade-out effect using Ajax and jQuery. I like Twitter API very much, it's clean and faster. So i prepared this jQuery tutorial delete action with out refreshing page.

Part II: Delete Records with Random Animation Effect using jQuery and Ajax.

This is a simple tutorial just change some lines of database code! I was developing some what Twitter like API. Today I published small part that explains how to Delete a Record with animation fade-out effect using jQuery and Ajax.

The tutorial contains a folder called posting with three PHP files and one sub folder js includes jQuery plugin.

- index.php
- dbconfig.php(Database configuration )
- delete.php
Download Source Code     Live Demo

Database Table Code
message TEXT);

Step 1. index.php(user interface page)
Here Displaying records form database using while loop. Delete button included in <a> anchor tag attribute id=<?php echo $row['ms_id']; ?>. This we are passing to delete.php page.


<form action="" method="post">
<span class="what">What are you doing?</span>
<textarea  =""  cols="55" id="update" maxlength="145" name="update" rows="3"></textarea>
<input type="submit" value=" Update "  class="update_button" />

$sql="select * from updates order by ms_id desc";
$result = mysql_query($sql);
<tr><td><?php echo $message; ?></td><td><a href="#" id="<?php echo $row["ms_id"]; ?>" class="delbutton"><img src="trash.png" alt="delete"/></a> </td></tr>


Step 2. delete.php
Simple php script delete data from Updates table.

$sql = "delete from {$prefix}updates where ms_id='$id'";
mysql_query( $sql);

Step 3 Ajax and jQuery Code
Included jQuery plugin in head tag and ajax code included in this jquery function $(".delbutton").click(function(){}- delbutton is the class name of anchor tag. Using element.attr("id") calling delete button value.


<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" 
$(function() {

var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
type: "POST",
url: "delete.php",
data: info,
success: function(){
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
return false;


Step 4.dbconfig.php
You have to change the database configuration like database name, username and password.

Download Source Code     Live Demo

Related Links

Twitter Like Parsing URLs with JavaScript.
jQuery Username Live Validation check.
Insert and Load Record using jQuery and Ajax


  1. Well, back to school for you.

    1 - Do not use $_GET for these kind of state changes

    2 - Learn about Cross site scripting

    3 - Learn about Cross site request forgeries.

  2. Oh, and

    4 - learn how to protect your application from SQL injections

    /me cries.

    These kind of tuturials is what leads herds of PHP beginners to the cliffs.

  3. Please....
    $id = mysql_escape_String($id);

    $_POST helps to protect against script kids, but it isnt a problem to simulate a post to a file.

    another way to secure this is to use session vars, one should be set at page, this should be checked at ajax script side.

  4. rather than mysql_real_escape_string(), I suggest to use prepared statement to protect your query from malicious activities

  5. mvc mayvbe ? that php looks awfull.

    I will recommend also to use another way to handdle your db connection, maybe a wrapper class or a good framework that do it for you?

    Shink and Encrypt your Js files.

    Usea time records & ip´s fields for you deletes,inserts,etc..

    Pd. Please do somenthing with that bloddy php.

  6. The author should state that this article is written by a beginner for beginners but for demonstration purpose. Lot of bad practices, security issues. Please do not copy and paste.

  7. kir to on dahanet beshe martike hadaghal ye jori minveshti ke toye IE kar kone
    martike kos kesh
    kir to kose nanat

  8. The animation is not working in IE???


  9. really nice jquery animation effect! :)

  10. would be helpful if include sql file

  11. you have forgot

    var element = $(this);

  12. this code
    .animate({ backgroundColor: "#fbc7c7" }, "fast")
    doesn't works in IE

  13. Hi,

    I have just started to learn jQuery. This is really very nice. Now i have another type of question. My question is like...

    when i click on delete it just deletes but in some cases i have t check that weather this id is associated with some other table and if it is with some important table than it wont get deleted. so is it possible to do this ? and if it than how ? record must not be deleted when it is associated with other table.

    Do let me know.
    Thank you.

  14. Srinivas :

    I implemented your script, but i want to modify it when delete it turns red background. any idea ?


  15. Tejas Mehta .... couldnt you add a field to your table for example ... 'important' then if when inserting you get a few queiries to check if it is important and if so make it equal ='1' ...if not then make it equal ='0'. Then when this script deletes just make the query check to see if important ='0' ...if so delete else show error/dont delete?

  16. @Gabriel

    Turns red backgroud you have to use jquery color plugin with element animate()

    Soon I will discuss on "jQuery Basics Series"

  17. Hiya,

    Ive tried to use this code along with your comment slide down script and they dont seem to like each other. When I insert the code from this in the header it shows a blank screen.

    Is there a reason for this? Im new to ajax and thought the class would stop each of the insert and delete from clashing?


  18. hey, this is really great tutorial. I was able to get it thru. thanks for your time and help.

    It doesn't work for the new records added with the tutorial we have on your site. The deletion works if we reload the page though.

    Any light you can provide on it really be wonderful.

    Thanks again Srinivas for the great work here!

  19. EXCELLENT work man!!!!
    you saved me here.

  20. Instead of mysql_real_escape_string(), please use intval()

  21. Hi

    I try using your code, but it display the alert box after that nothing happens.

    Thank you

  22. Hi

    I Tryed you code but it displays the alert box but I doesnt delete

    Please help

  23. @sboniso

    Try this below tutorials new Version


  24. Hello,

    its good on firefox but it not proper work on IE.


  25. I can't get this to work. Does this code work or did I do a mistake?

  26. var del_id = element.attr("id"); this part is not working in my code. I changed it to var del_id = $("a").attr("id"); now that is working? what is the wrong with that?

  27. I have understand all this tuto but it's not very detailed...thank you as well :)

  28. Easy to understand. Can you add edit and update too.

  29. very nice tutorials.it's really helpful for beginner.....thank you

  30. Hi,
    this correct line:
    var del_id = $(this).attr("id");

  31. i tried this code is working, it can delete a record but the animation is not working. how i can fix it please?

  32. This tip is helpful, guy... Thanks, it works for me.

  33. Excellent script. Was wondering how hard it would be to do the same but for deleting records from one area on the page and adding to another.

  34. $prefix : why is this used???