AJAX Record Deletion Using jQuery

AJAX Record Deletion Using jQuery

Hello i just found a code to delete a row from my database using ajax but
the thing is that when the delete is made in the html the table that
should dissapear does not work.
here is the js code
<script type="text/javascript" />
$(document).ready(function() {
$('a.delete').click(function(e) {
e.preventDefault();
var parent = $(this).parent();
$.ajax({
type: 'get',
url: 'index.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();
});
}
});
});
});

and the PHP code is this one
<? echo "<div class=\"record\" id=\"record-".$id."\" >
<tr >
<td><span style='color:#eb8500' >".++$i."</span></td>
<td width='270px' style='padding:5px'><div align='left' >
".$name."
</div></td>
<td width='50px' style='padding:5px'><div align='left' >
<input onclick='this.select()' type='text' size='15'
value='".$link."' />
</div>
</td>
<td style='padding:5px'><div align='center'>
".$cat."
</div>
</td>
<td >
<a class=\"delete\" href=\"?delete=".$id."\" >Delete</a>
</td>
</tr>
</div >"; ?>
it should delete all the table displayed in the echo, but it doesnt. thank
for the help...