Delete MySQL data with php through ajax and jquery, show page without deleted data

I have this link (shown below). When it is clicked it sends the id of a post to a PHP file called delete_post.php开发者_开发知识库 which in turn deletes the post with that id out of my MySQL database. This works great except that after the post is deleted the post is still displayed on the page until it is refreshed. How could I make it so the post is removed from my page as soon as I click the link, rather than after I click the link and after I refresh the page.

<a href="javascript:$.post('delete_post.php', { id: '$row[id]' } );" class='delete_post' title='delete post'>delete post</a>

1. Add an ID (using the $row['id']) to the div / table row (the container) that is holding your post.
2. After the AJAX is completed, you then simply hide the container.

To hide the container after your AJAX is complete, simply modify your $.post by adding a callback function like this:

javascript:$.post('delete_post.php', { id: '$row[id]' } , function(){ $('#row$row[id]').hide(); });

I'm not familar with the jQuery code (I could do it in Prototype if you want an example) but, you should attach listeners to the links instead of calling the AJAX inline. That way you can use jQuery's DOM traversal functions to move up to the parent div or table row and just simply .remove() it after you get the successful response from your AJAX call.

There is an optional third parameter to the post() function that allows you to create an anonymous function that is executed on success.

<a href="javascript:$.post('delete_post.php', { id: '$row[id]' }, function() { location.reload(); } );" class='delete_post' title='delete post'>delete post</a>