Передо мной стоит задача по нажатию добавлять input с кнопкой удаления этого инпута. Максимальное кол-во инпутов 4. Каждый инпут должен иметь свой уникальный id(pick1,pick2,pick3 или pick4).У меня возникает путаница после удаление и добавления новых. я пробовал добавлять значения в массив и тянуть counter c него, но не получается. Подскажите алгоритм.
let count = 0;
let mass = [];
$('.addPick').click(function(){
var input = document.createElement("input");
var btn = document.createElement("span");
var div = document.createElement("div");
if (count < 4) {
count++;
input.setAttribute("type", "text");
input.setAttribute("id", "pick" + count);
btn.innerHTML = "×";
btn.setAttribute("class", "delete-pick");
div.append(input,btn);
$('.new-input').append(div);
$('.delete-pick').click(function(){
count--;
$(this).parent().remove();
})
} else {
alert("Можно выбрать максимум 4 точки");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="+" class="addPick">
<div class="new-input"></div>
input.setAttribute('id', 'pick' + ($('.new-input').children().length + 1));
- симбиоз нативного JS и библиотеки JQ.