Как назначить удаленный идентификатор текстового поля для вновь созданного текстового поля при создании динамического текстового поля?

Question

Я динамически генерирую текстовые поля и допускаю только 5 текстовых полей.

Теперь предположит, что я сгенерировал 5 текстовое поле с Txtopt1, Txtopt2, Txtopt3 соответственно .. и я удалением 2-ое текстового поля, а затем снова я генерируя 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

Отслеживайте идентификаторов вы назначены, и всегда занимают самые низкие доступны.

Кроме того, вам не нужно использовать escape-символы внутри вашего 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>