添加和刪除項目保持計數器和文本列表的控制追加

Question

沒關係，如果有人能幫助我修我的代碼：

我在做它的價值的工作進展良好，我可以添加和刪除元素櫃檯似乎重新

問題就在這裏：

我CA開始添加的項目，他們通過1,2,3,4,5

得到增量然後我會刪除項目2,3 - 它將重置爲1,2,3 [迄今爲止好]

然後我再加一條，它從1,2,3,5開始 - 看到它從5而不是4開始[這就是需要解決：]

這裏是我的運動員競賽完整

<script type="text/javascript"> 
var cnt = 1; 
$("body").on("click", ".delrow", function() { 
     var id = $(this).attr('data-id'); 
     $('.newrow'+id).remove(); 
     cnt--; 
     resetStuff(); 
}); 
function resetStuff() { 
    cnt = 2; 
    $(".delrow").each(function() { 
     $(this).parent().attr('class','newrow'+cnt); 
     $(this).attr('data-id',cnt); 
     $(this).parent().find('input:text').each(function() { 
      var ids = $(this).parent().find('input:text').attr('id'); 
      var getID = ids.split('_'); 
      var getName = getID[0]; 
      var getName2 = getID[1]; 
      $(this).parent().find('input:text').attr('id',getName + '_' + getName2 + '_' + cnt); 
      $(this).parent().find('input:text').attr('name',getName + '_' + getName2 + '_' + cnt); 
     }) 
     cnt++; 
    }) 
} 
$(".addnewrow").click(function() { 
    cnt++; 
    $("#tab2").append('<div class="newrow'+cnt+'"><div align="right" class="delrow" data-id="'+cnt+'"><button type="button" class="btn btn-warning mright mtop"><i class="fa fa-trash-o" aria-hidden="true"></i></button></div><div class="col-md-3"><label>First name</label>\ 
    <input id="bill_first_'+cnt+'" class="form-control" name="bill_first_'+cnt+'" data-rule-required="true" data-msg-required="Provide First Name" placeholder="Firstname"/>\ 
    </div></div>'); 
}); 
</script> 

在上面，我ASO要添加一個文本框，我可以在一個文本框保持添加的字段的記錄像

1,2,3,4

喜歡這裏是我最初的HTML上頁面

<div id="tab2"> 
      <h2>Billing Information</h2> 
     <div align="right" class="col-lg-12"><span class="addnewrow"><a href="javascript:;" class="btn btn-default">Add New</a></span></div> 
      <div class="col-md-3"> 
      <label>First name</label> 
      <input id="bill_first_1" class="form-control" name="bill_first_1" data-rule-required="true" data-msg-required="Provide First Name" placeholder="Firstname" /> 
      </div> 

    <input type="text" name="listaddress_bill" id="listaddress_bill" value="1"> 
     </div> 

爲每個添加和刪除，我希望我的這個輸入字段與正確的計數器進行更新：

listaddress_bill 

我嘗試添加一些代碼，但是這並沒有奏效：

var vals = cnt; 
    $.each(function() { 
     if(vals) vals += '^'; 
     vals += $(this).val(); 
    }); 
    $("#listaddress_bill").val(vals); 

上面的代碼只是在cnt++中添加addnewrow函數

Answer 1

所有你需要做的是$("#tab2").append()後運行cnt++，而不是之前：

var cnt = 1; 
 
$("body").on("click", ".delrow", function() { 
 
    var id = $(this).attr('data-id'); 
 
    $('.newrow' + id).remove(); 
 
    cnt--; 
 
    resetStuff(); 
 
}); 
 

 
function resetStuff() { 
 
    cnt = 2; 
 
    $(".delrow").each(function() { 
 
    $(this).parent().attr('class', 'newrow' + cnt); 
 
    $(this).attr('data-id', cnt); 
 
    $(this).parent().find('input:text').each(function() { 
 
     var ids = $(this).parent().find('input:text').attr('id'); 
 
     var getID = ids.split('_'); 
 
     var getName = getID[0]; 
 
     var getName2 = getID[1]; 
 
     $(this).parent().find('input:text').attr('id', getName + '_' + getName2 + '_' + cnt); 
 
     $(this).parent().find('input:text').attr('name', getName + '_' + getName2 + '_' + cnt); 
 
    }) 
 
    cnt++; 
 
    }) 
 
} 
 
$(".addnewrow").click(function() { 
 
    $("#tab2").append('<div class="newrow' + cnt + '"><div align="right" class="delrow" data-id="' + cnt + '"><button type="button" class="btn btn-warning mright mtop"><i class="fa fa-trash-o" aria-hidden="true"></i></button></div><div class="col-md-3"><label>First name</label>\ 
 
    <input id="bill_first_' + cnt + '" class="form-control" name="bill_first_' + cnt + '" data-rule-required="true" data-msg-required="Provide First Name" placeholder="Firstname"/>\ 
 
    </div></div>'); 
 
    cnt++; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tab2"> 
 
    <h2>Billing Information</h2> 
 
    <div align="right" class="col-lg-12"><span class="addnewrow"><a href="javascript:;" class="btn btn-default">Add New</a></span></div> 
 
    <div class="col-md-3"> 
 
    <label>First name</label> 
 
    <input id="bill_first_1" class="form-control" name="bill_first_1" data-rule-required="true" data-msg-required="Provide First Name" placeholder="Firstname" /> 
 
    </div> 
 

 
    <input type="text" name="listaddress_bill" id="listaddress_bill" value="1"> 
 
</div>

希望這有助於！ :)