どのように配列インデックスとして名前が付けられたテキストボックスを並べ替えることができます

Question

私は動的に行をレンダリングする必要があるプロジェクトに取り組んでいます。しかし、ユーザーは、私の現在の作業

jQueryの

var counter = 1; 
function addrow() { 
    var textbox = "<div id='rows" + counter + "'> </br><label> Option : </label><input type='text' name='Answers[" + counter + "]' class='ahsan required' /><a href="">Remove</a></div>"; 
    var form = $("#form").valid(); 
    if (form) { 
     $("#TextBoxesGroup").append(textbox); 
     counter++; 
    } 
    else { 
     return false; 
    } 
} 

HTML今

<div id="TextBoxesGroup" style="margin-left: 100px;"> 
    <div id="rows0"> 
     </br><label> 
      Option : 
     </label> 
     <input type='text' name='Answers[0]' class='ahsan required' /><a href="">Remove</a> 
    </div> 
</div> 
<div> 
    <input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' /></div> 

を見て、私は10行を持っている場合がある名前が回答[0,1となり、その行を削除することができ、2,3,4,5]。アンカーを削除してすべてのテキストボックスの名前をリコードするときに入力を削除したい
たとえば、4番目のインデックスで入力を削除すると、すべてのテキストボックスが自動的に再配置されます。私に助けてくださいありがとうございました

Answer 1

あなたはカウンターなしで作ることができます。このようにして、答えは常に0から始まる配列内で配列されます。

ここではもっともらしいソリューションです：

$(function(){ 
    $("#form").validate(); 
    this.addrow = function() { 
     if ($("#form").valid()) { 
      var textbox = "<div> </br><label> Option : </label><input type='text' name='Answers["+$("#TextBoxesGroup div").length+"]' class='ahsan required' /><a class='remove-me' href='#'>Remove</a></div>"; 
      $("#TextBoxesGroup").append(textbox); 
      $('.remove-me').click(function(){ 
       $(this).parent().remove(); 
       return false; 
      }); 
     } 
     else { 
      return false; 
     } 
    } 
    this.addrow(); 
}); 

とhtmlは、このような単純です：彼らが最初に描画されたときの答え行が配置された場合

<form id="form"> 
<div id="TextBoxesGroup" style="margin-left: 100px;"></div> 
<div> 
    <input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' /> 
</div> 
</form>