javascript - 生成动态文本框时如何将已删除的文本框id分配给新生成的文本框？

Question

我正在动态生成文本框，并且只允许使用 5 个文本框。

Now say i have generated 5 textbox with Txtopt1,Txtopt2,Txtopt3 resp.. and i am removing 2nd textbox and then again I am generating 1 new textbox then i want to assign Txtopt2 to newly generated textbox instead of Txtopt4.

这是我的代码:

var cnt = 1;
 var usedIds = [];
 var maxNumberOfTextboxAllowed = 5;
 function Generatetextbox() {
      if (cnt <= maxNumberOfTextboxAllowed) {
            var id = findAvailableId();
            var OrderingField = $("<div class='OrderingField' id='OrderingField" + id + "'/>");
            var LeftFloat = $("<div class='LeftFloat' id='LeftFloat" + id + "'/>");
            var RightFloatCommands = $("<div class='RightFloat Commands' id='RightFloat Commands" + id + "'/>");
            var upButton = $("<button value='up'>Up</button>");
            var downButton = $("<button value='down'>Down</button>");
            var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "'  name='TxtoptNm" + id + "'/>"); 
            var removeButton = $("<img class='remove' src='../remove.png' />");
            LeftFloat.append(fName);
            LeftFloat.append(removeButton);
            RightFloatCommands.append(upButton);
            RightFloatCommands.append(downButton);
            OrderingField.append(LeftFloat);
            OrderingField.append(RightFloatCommands);
            $("#FieldContainer").append(OrderingField);
            cnt = cnt + 1;
        }
        else
            alert("Cant create more than 5 route points")
    }

 function findAvailableId() {
        var i = 1;
        while (usedIds[i]) i++;
        usedIds[i] = true;
        return i;
    };

    function removeId(idToRemove) {
        usedIds[idToRemove] = false;
    };

  $(document).on('click', "img.remove", function() {
      $(this).parent().parent().fadeOut(1000, function() {
        if (cnt > maxNumberOfTextboxAllowed)
          cnt = cnt - 2;
        else if (cnt == 1)
          cnt = 1;
        else
          cnt = cnt - 1;

        var id = $(this).attr("id").substr(5);

        removeId(id);

        $(this).remove();
        console.log(cnt)
      });

    });

.LeftFloat
{
    float: left
}
.RightFloat
{
    float: right
}

.FieldContainer
{
    border: 1px solid black;
    width: 400px;
    height: 300px;
    overflow-y: auto;
    font-family:tahoma;
}
 .OrderingField
{
    margin: 3px;
    border: 1px dashed #0da3fd;
    background-color: #e8efff;
    height: 50px;
}
.OrderingField div.Commands
{
    width: 60px;
}
button
{
    width: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div id="FieldContainer">
                                    </div>
 <button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>

Answer 1

跟踪您分配的 ID，并始终采用可用的最低 ID。

此外，您不需要在 html 中使用转义字符，您可以使用单引号来指定字符串。

这样的事情应该有帮助:

    var cnt = 1;
    var maxNumberOfTextboxAllowed = 5;
    var usedIds = [];

    function findAvailableId() {
      var i = 1;
      while (usedIds[i]) i++;
      usedIds[i] = true;
      return i;
    };

    function removeId(idToRemove) {
      usedIds[idToRemove] = false;
    };

    function Generatetextbox() {
      if (cnt <= maxNumberOfTextboxAllowed) {
        var id = findAvailableId();
        var fieldWrapper = $("<div class='fieldwrapper' id='field" + id + "'/>");
        var fName = $("<input type='text' class='fieldname' id='Txtopt" + id + "'  name='TxtoptNm" + id + "'  />");
        var removeButton = $("<img class='remove' src='../remove.png' />");

        fieldWrapper.append(fName);
        fieldWrapper.append(removeButton);
        fieldWrapper.append('<br />');
        fieldWrapper.append('<br />');
        $("#abc").append(fieldWrapper);
        cnt = cnt + 1;
      } else
        alert("Cant create more than 5 textbox")
    }

    $(document).on('click', "img.remove", function() {
      $(this).parent().fadeOut(1000, function() {
        if (cnt > maxNumberOfTextboxAllowed)
          cnt = cnt - 2;
        else if (cnt == 1)
          cnt = 1;
        else
          cnt = cnt - 1;

        var id = $(this).attr("id").substr(5);

        removeId(id);

        $(this).remove();
        console.log(cnt)
      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="abc"></div>
    <button onclick="Generatetextbox()" class="btn btn-primary" type="button">Add</button>