Use your left/right keys to browse tutorials
jQuery Ajax delete

jQuery Ajax delete

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 17, 2009

Removing contents with Ajax is a useful tool to have in any web designers kit. Using a few lines of jQuery we can remove a div and simultaneously remove a record from the database with Ajax. In the download and demo you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment div with a slide up animation which will remove the div. click the image below to check out the demo.

jquery-delete

The Code

We start by writing the dom ready function to simply hide our loading message div which is used as a visual representation to the user when we go to delete a comment.

$(document).ready(function() {
$('#load').hide();
});

The next block of code is what essentially does the hard work. we have a .click function to start with that when run fades in the ‘#load’ div to show the user that we’re deleting the item.

We then set the variable ‘commentContainer’ which is set to represent the parent element to ‘.delete’ which is the div ‘.box’ as show in the image below.

var commentContainer = $(this).parent();

jquery-delete1

The variable ‘id’ is then set with the value of the delete button id which would could be the id of the row in the database that you want to delete. This is then posted to the page delete.php. once the Ajax request has been made and a response has been acknowledged we then slide up and remove the div ‘.box’ and fade out the loader. Finally ‘return False;’ is added to the end of the function in order to stop the page from refreshing as we are using an ‘a tag’.

$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;

$.ajax({
   type: "POST",
   url: "delete.php",
   data: string,
   cache: false,
   success: function(){
	commentContainer.slideUp('slow', function() {$(this).remove();});
	$('#load').fadeOut();
  }

 });

return false;
	});
});

I have left the delete.php page for you to add your own database connection script and query in order to use the code for your own needs. If however you have any questions on how to set this up please let me know below.

The complete code along with images is available to download below.

demodownload



More tutorials from Papermashup
Comments
81 discussions around jQuery Ajax delete
Newer Comments
  1. Pingback: Favorites from the Feeds #01

  2. Dave says:

    Just what i was looking for! Thanks!

  3. This is great! I love how Facebook implements this, and I’d be excited to try it on my blog.

  4. Daniel says:

    Hey Ashley,

    thanks for the tuto! Just a small note: the css file is missing in the zip download.

    Dan

  5. JDStraughan says:

    This is one of the best jquery tutorials I have seen recently. Added to http://tutlist.com

  6. dottorgonzo says:

    can also be used for posts?

  7. Pingback: CSS Brigit | jQuery Ajax delete

  8. This may be similar to other Ajax tutorials I’ve seen, but it’s definitely one of the most streamlined and easy-to-follow tutorials on the subject.

  9. Pingback: News jQuery Ajax delete | Papermashup.com | Web 2.0 Designer

  10. Ben says:

    Cool. Looks similar to David Walsh’s inline delete thing

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.