生成動態文本框時，如何將已刪除的文本框ID分配給新生成的文本框？

Question

我正在動態生成文本框，只允許5個文本框。

現在說我用Txtopt1，Txtopt2，Txtopt3分別生成了5個文本框。我要刪除第二個文本框，然后再次生成1個新文本框，然后我想將Txtopt2分配給新生成的文本框而不是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>