Fotiman - 1:47 pm on May 18, 2012 (gmt 0)

Ok, I think you can probably still provide a more efficient method than doing multiple AJAX requests. Here's the approach I would take.

If each child has it's own delete button, then onclick of one of those buttons send an AJAX POST request to the server. This request is basically a request to delete some data (there may be some security considerations here... just saying). The page on the server that processes the request should perform the delete in the database and then return a response that indicates whether the request was successful. When your AJAX request gets the response and it was successful, delete that child from the container.

Note, here is how I'd do it as a progressive enhancement:

<div id="main_content"> <div> <form method="post" action="delete.php"> <table>...</table> <input type="hidden" name="rowId" value="42"> <input type="submit" class="deleteBtn" value="Delete"> </form> </div> ... </div> $('form').submit(function(event) { // stop the form from submitting normally event.preventDefault(); // get some values relating to this form/section var $form = $(this), url = $form.attr('action'), rowId = $form.find('input[name="rowId"]').val(), $nodeToDeleteOnSuccess = $form.parent(); // send the data using post and delete the container on success $.post( url, {rowId: rowId}, function(data){ if (data === "success") { $nodeToDeleteOnSuccess.remove(); } }, "text" ); return false; });

Note, as a progressive enhancement this is still not complete. I would want to change the delete page to return more than just the text "success" so that the user saw more than just that text. But this *should* work (I haven't tried it).