0

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

1
  • 1
    input.setAttribute('id', 'pick' + ($('.new-input').children().length + 1)); - симбиоз нативного JS и библиотеки JQ.
    – user256824
    7 окт 2019 в 16:21

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.