Animated AJAX Record Deletion Using jQuery

php

// from david walsh blog
// The PHP - Content & Header
// The following snippet goes at the top of the page:

if(isset($_GET['delete'])) {
  $result = mysql_query('DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'],$link);
}

// The following is used to display the records:

$result = mysql_query('SELECT * FROM my_table ORDER BY title ASC',$link);
while($row = mysql_fetch_assoc($result)) {
	echo '<div class="record" id="record-',$row['item_id'],'">
				<a href="?delete=',$row['item_id'],'" class="delete">Delete</a>
				<strong>',$row['title'],'</strong>
			</div>';
}

// The jQuery JavaScript
$(document).ready(function() {
	$('a.delete').click(function(e) {
		e.preventDefault();
		var parent = $(this).parent();
		$.ajax({
			type: 'get',
			url: 'jquery-record-delete.php',
			data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
			beforeSend: function() {
				parent.animate({'backgroundColor':'#fb6c6c'},300);
			},
			success: function() {
				parent.slideUp(300,function() {
					parent.remove();
				});
			}
		});
	});
});
// For every link, we add a click event that triggers the AJAX request. During the request, we transition the containing element to a red background. When the AJAX request returns a "success" response, we slide the element off of the screen.