Question

Currently I’m trying to make an ajax entry delete function, when I click on delete the entry is being deleted correctly. When I click on delete, the whole row should disappear, instead of only the td where the delete url is placed (that’s happening now, the script can’t stand closing tags or something).

This is the code

    $(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
type: "POST",
url: "core/actions/delete.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
}, 
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});
}
});

return false;
});
});

and the last td of the tr

<td><a href="#" id="' .($id). '" class="delete_button">X</a></td> 

I think the javascript should be changed a little, but don’t know what/where.

Do you know how to? Or do can you point me to the best ajax delete entry tutorial? (tried several..)

Answer 1

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

In the context where you wrote the line above “this” refers to the <td> which is why it disappears. You could change to $(this).parents('tr:first');

http://jsfiddle.net/Ed3mW/