динамическое добавление input с уникальным id

256

01 сентября 2021, 18:20

Передо мной стоит задача по нажатию добавлять 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 = "&times;"; 
                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>

Answer 1

Всё можно сделать по другому, но я подскажу ошибку в Вашем коде с которым Вы работаете. Когда Вы вешаете удаление в данной строчке $('.delete-pick'), Вы присваиваете событие на все элементы, тем самым если у Вас 4 элемента и Вы кликаете на крестик, то 4 раза срабатывает count--. Измените $('.delete-pick') на $(btn). Второй момент когда происходит удаление, id на элементах остаются старые, в результате после добавления нового элемента id могут совпасть! Поэтому необходимо их переопределить на элементах

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 = "&times;"; 
        btn.setAttribute("class", "delete-pick"); 
        div.append(input,btn); 
 
        $('.new-input').append(div); 
 
        //изменения 
        $(btn).click(function(){ 
        $(this).parent().remove(); 
        reAttachId() 
        count--; 
        }) 
    } else { 
        alert("Можно выбрать максимум 4 точки"); 
    } 
}) 
function reAttachId() { 
  var container = document.querySelectorAll('.new-input input'); 
  container.forEach((item, index) => { 
    item.setAttribute('id', 'pick'+ (index + 1)); 
  }); 
}

<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>