Javascript/Jqueryを使用してテキストボックスのIDをシリアルに保持できません

Question

問題があります。+ボタンを使用して複数のテキストボックスを追加し、-ボタンを使用して削除しています。ここで私は各テキストボックスのIDをシリアルに保持することができません。私は以下のコードを説明しています。

<div class="form-group" id="intro-box"> 
    <input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value=""> 
    <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);"> 
    </div> 
    <script> 
    var a = 0; 
    function addMore(i) { 

     a = a + 1; 

     i = a; 

     $("#plus").remove(); 

     $('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' + 
     '<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' + 
     '<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>'); 
    } 

    function removeThis(j) { 
     $("#introlabelname" + j).remove(); 
     $("#minus" + j).remove(); 
    } 
</script> 

ここに私の問題は、idがintrolabelname0,introlabelname1,introlabelname2..次のように増加したがintrolabelname1テキストボックスを削除し、そのこのようintrolabelname0,introlabelname2,introlabelname3を来て、再び追加するとしながらされています。ここではintrolabelname1をintrolabelname0,introlabelname1,introlabelname2..から削除すると仮定します。introlabelname0,introlabelname1とし、再度追加する場合はintrolabelname0,introlabelname1,introlabelname2とする必要があります。常にすべてのテキストボックスIDは0,1,2...から順に続きます。ここにはmy full codeがあります。私を助けてください。

Answer 1

、およびインデックス値を持つ新しいID（複数可）を作成します。まず、テキストボックスのクラス名を与える：

class="form-control inputBox" 

次に、この機能の追加：

function repopulate() { 
    $('.inputBox').each(function (i, e) { 
     $(this).attr('id','introlabelname' + i); 
     $(this).next().attr('onClick', function (old,n) { 
     return 'removeThis(' + i + ')'; 
     }); 
     $(this).next().attr('id', function (old,n) { 
     return 'minus' + i; 
     }); 
    }) 
} 

最後に、各関数呼び出しのために、この関数を呼び出します。ここでは

repopulate(); 

が更新されますDEMO

p/s：HTMLを編集する必要があります。 Y構造

Answer 2

私はあなたがちょうどあなたが行を削除すると、変数をデクリメントする必要があると思う：簡単な方法は、すべての入力ボックスをループにある

function removeThis(j) { 
    $("#introlabelname" + j).remove(); 
    $("#minus" + j).remove(); 
    a = a - 1; 
} 

Answer 3

You can also do like this. 

1.Iは、I = $（ "INPUTBOX。"）VARを加え長さ+ 1。 addMore関数のこの行は、現在の入力ボックス数を計算し、新しい入力ボックスにシリアル化番号を追加します。

2.また、入力ボックスとボタンIDをシリアル化するserialize（）関数を追加しました。

function addMore(i) { 
     var i = $(".inputBox").length + 1; 
     $("#plus").remove(); 
     $('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control inputBox" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' + 
     '<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' + 
     '<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>'); 
    } 

    function removeThis(j) { 
     $("#introlabelname" + j).remove(); 
     $("#minus" + j).remove(); 
     serialize(); 
    } 

    function serialize(){ 
     var i=1; 
     $(".inputBox").each(function(){ 
     $(this).attr("id", "introlabelname"+i); 
     $(this).next().attr("id", "minus"+i); 
     i++; 
     }); 
    }