FadeOut and Remove into a FOR doesn't work

Question

for(x=0; x < Number; x++){
   $(this).parentsUntil('.formRow').siblings(ContentValveForm).children('div:last-child').remove();     
}

That code works ok, but when I try to add a .fadeOut effect and then Remove x amount of items just removed the last. Why? pls I need help.

for(x=0; x < Number; x++){
   $(this).parentsUntil('.formRow').siblings(ContentValveForm).children('div:last-child').fadeOut(500, function(){$(this).remove();});      
}

Answer 1

Because your for() loop is way over by the time that 500ms timer on your fadeOut() is done.

You should also not use a global variable for x. Change it to:

for(var x = 0; x < Number; x++) {

Try using .queue() around the fadeOut/remove so there's nothing being skipped over.

$(this).parentsUntil('.formRow')
       .siblings(ContentValveForm)
       .children('div:last-child')
       .queue(function() {
            $(this).fadeOut(500, function(){
                $(this).remove();
            });
        });