Animated Ajax Record Deletion Using jQuery （Jquery ajax 删除记录）

<style type="text/css">

.record                  { padding:10px 20px; background:#eee; border-top:1px solid #ccc; width:300px; }
.delete                  { color:#f00; display:block; width:40px; float:right; }

</style>

<script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery-1.3.2.js"></script>

<script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery.color.js"></script>
<script type="text/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();
});
}
});
});
});

</script>
<div class="record" id="record-1">
<a href="?delete=1" class="delete">Delete</a>
<strong>Database Item 1</strong>
</div>
<div class="record" id="record-2">
<a href="?delete=2" class="delete">Delete</a>
<strong>Database Item 2</strong>
</div>

Demo: http://davidwalsh.name/dw-content/jquery-record-delete.php

another: http://davidwalsh.name/animated-ajax-record-deletion-mootools