jquery fade, remove, then next step

Question

I have a table and i am wanting to fade the row out, then remove it (which is working fine)

after it is remove, i am summing up all the columns and updating the total that bit isn't working. it is summing up before the row is removed

how do i make this run synchronisly ?

$("#tr_invoice_" + id).fadeOut("slow", function() { 
  $("#tr_invoice_" + id).remove();      
  tot = $("[name^=amount]").sum(); 
  confirm("got tot: " + tot);                           
});

After reading @pulses comment, i went and changed things around about and removed the amount of the "removed row" from from the sum manually, but that started giving a total less 2 x current row amount.

So i reverted it back and changed the confirm to a $("#tag").html(tot). and it started working fine, so i am not sure if it was a syntax error on my part or the confirm had something to do with it, but either way it is working now

so in light of that, should i delete this question, or leave as is???

Answer 1

Your code seems to be correct, as far as I can tell from the extract you posted:

You are removing the element after the animation, then re-query all necessary elements and sum them up.

The only explanation would be, that the element is not removed and it still somehow is catched by your query. Try using Firebug to confirm, that the element actually is removed.

Additionally try making the $("[name^=amount]") a little more precise. Currently it can match a whole lot of nodes, perhaps even some outside your table.

Answer 2

Try putting a delay after remove:

$("#tr_invoice_" + id).fadeOut("slow", function() { 
  $("#tr_invoice_" + id).remove();      
  setTimeout(function(){
     tot = $("[name^=amount]").sum(); 
     confirm("got tot: " + tot);                           
  },100);
});

Answer 3

Change it to this

$("#tr_invoice_" + id).fadeOut("slow", function() { 
  $("#tr_invoice_" + id).remove(function(){
    tot = $("[name^=amount]").sum(); 
    confirm("got tot: " + tot);
  });
});

Answer 4

If the following code still returns the same total, you are definitely adding up a rogue element as DR suggested.

tot = $("[name^=amount]").not('#' + $(this).attr('id')).sum();