javascript - 无法使用 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

You can also do like this.

1.我添加了 var i = $(".inputBox").length + 1; addMore 函数中的这一行它计算当前输入框计数并将序列号添加到新输入框。

2.我还包括 serialize() 函数，它可以序列化您的输入框和按钮 ID。

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++;
      });
    }