Помогите пожалуйста реализовать функционал кнопок.
С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>