javascript - How do I make my counter work correctly? -

i have function adds div when press button. have counter re-setting logic written in removal should re-count names.

my problem when add 3 items, , remove 2nd item, 3rd item not rename itself.

what doing wrong this?

 $(function () {      var rowitem = $(".row", $(".formitems")); //select rows class formitems      $(".formitems").on("click", ".addrow", function () {          var newitem = rowitem.clone(),              rowindex = $(".row", $(".formitems")).length;          $(":input", newitem).each(function (c, obj) {              $(obj).attr("name", $(obj).attr("crap") + rowindex);          });          $(".formitems").append(newitem); // adds @ end of container      }).on("click", ".removerow", function () {          if ($(".row", $(".formitems")).length > 1) {              var target = $(this).parent().parent().parent().parent(".row");              target.slideup(function () {                  target.remove();              });          }          (i = 0; < $(".row", $(".formitems")).length; i++) //select our div called //formitems , count rows in          {              rowobj = $(".row", $(".formitems"))[i];              $(":input", rowobj).each(function (c, obj) {                  $(obj).attr("name", $(obj).attr("crap") + i);              })          }      });  }); 

edit : ok, put alerts before , after using remove(). jquery takes time re-calulate properties? if yes, cached? if yes, can force refresh them.?

as far understand, want update 'name's after removal. code remove() asynchronously when slideup() completed, while renaming invoked after invoking slideup(), before remove() called.

you can solve placing renaming code after call remove(), inside slideup() handler:

 }).on("click", ".removerow", function () {      if ($(".row", $(".formitems")).length > 1) {          var target = $(this).parent().parent().parent().parent(".row");          target.slideup(function () {              target.remove();               // rename now!              (i = 0; < $(".row", $(".formitems")).length; i++) {                rowobj = $(".row", $(".formitems"))[i];                $(":input", rowobj).each(function (c, obj) {                 $(obj).attr("name", $(obj).attr("crap") + i);                })              }          });      }  });