0

Помогите пожалуйста реализовать функционал кнопок.

Сodepen to-do листа.

При нажатии на крестик удаляется input, при нажатии на add добавляется. При этом кнопки должны быть только у последнего input-A. Застрял на том, что кнопка срабатывает только один раз. Пробовал брать конкретную кнопку массива, т.к. добавляется новая кнопка и нужно работать именно с ней и т.д. Но ничего не вышло.

let add = document.querySelector('.btn-add');
let del = document.querySelector('.btn-delete');
let parent = document.querySelector('.choices__wrap');
let lastForClone = document.querySelector('.choices__row.last')

add.addEventListener('click', function() {
  let clone = lastForClone.cloneNode(true);
  lastForClone.removeChild(add);
  lastForClone.removeChild(del);
  lastForClone.classList.remove('last');
  parent.appendChild(clone);
});
<div class="choices__wrap">
  <div class="choices__row">
    <input type="text" placeholder="Enter choice" class="choices__default" required="">
  </div>
  <div class="choices__row">
    <input type="text" placeholder="Enter choice" class="choices__default" required="">
  </div>
  <div class="choices__row last">
    <input type="text" placeholder="Enter choice" class="choices__default" required="">
    <div class="btn-delete">delete</div>
    <div class="btn-add">add</div>
  </div>
</div>

1
  • а зачем вы удаляете и добавляете кнопку заново? в этот момент она лишается слушателя 7 мая 2019 в 19:40

1 ответ 1

1

cloneNode - НЕ клонирует обработчики добавленные с помощью addEventListener.

Из-за этого элементы в клонированном узле остаются без обработчиков.

Кроме того, так как querySelector возвращает НЕживую коллекцию, последнюю строку нужно выбирать каждый раз.

Например:

let add = document.querySelector('.btn-add');
let del = document.querySelector('.btn-delete');
let parent = document.querySelector('.choices__wrap');

add.addEventListener('click', function addHandler() {
  let lastForClone = document.querySelector('.choices__row.last');
  let clone = lastForClone.cloneNode(true);
  lastForClone.removeChild(document.querySelector('.btn-add'));
  lastForClone.removeChild(document.querySelector('.btn-delete'));
  lastForClone.classList.remove('last');
  clone.querySelector('.btn-add').addEventListener('click', addHandler);
  parent.appendChild(clone);
});
<div class="choices__wrap">
  <div class="choices__row">
    <input type="text" placeholder="Enter choice" class="choices__default" required="">
  </div>
  <div class="choices__row">
    <input type="text" placeholder="Enter choice" class="choices__default" required="">
  </div>
  <div class="choices__row last">
    <input type="text" placeholder="Enter choice" class="choices__default" required="">
    <div class="btn-delete">delete</div>
    <div class="btn-add">add</div>
  </div>
</div>

4
  • Спасибо за ваш ответ.Не сочтите за наглость, но как реализовать функционал удаления лишних инпутов?Пробовал делать по аналогии, но ничего не работает и ошибки не выскакивают - значит где-то логическая ошибка допущена. 8 мая 2019 в 7:07
  • @РусланДасаев, удалять только последний? В принципе подход тот же самый. нужно найти кнопки, клонировать их в предыдущий контейнер и удалить текущий. Можно сделать обработчики чуть более обобщенными тогда можно будет вместо клонирования использовать appendChild
    – Grundy
    8 мая 2019 в 7:10
  • Да, только последний.Я сделал по другому - удаляю последний(перед этим клонируя его), удаляю предпоследний, чтобы на его место вставить клон.После загрузки страницы, нажимая на одну из кнопок она отрабатывает свое действие, но другая перестает работать.Как, что нужно сделать с обработчиками, чтобы все работало? 8 мая 2019 в 7:48
  • @РусланДасаев. как-то совсем неочевидно ты делаешь :-)
    – Grundy
    8 мая 2019 в 8:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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