deletebutton в child и addbutton у ребенка не работает

Question

У меня проблема с моим кодом. добавлена ​​кнопка в родительском доме, она добавляет штраф. но у ребенка кнопка добавления не работает, то же самое для кнопки удаления. deletebutton в моем браузере работает только в родительском, а когда я нажимаю кнопку «Удалить», он удаляет все поля, которые я добавил ранее, и обновляю сайт. Хотя я добавил preventDefault. Это разрешено использовать preventDefault умножить время в файле?

Вот мой код: https://jsfiddle.net/q3Lz997m/

-код JS-файла:

const clickBtn = document.querySelector('#addingPerson'); 
const field = document.querySelector('#inputPerson'); 
let i = 0; 

const deleteField = document.querySelector('.deletePerson'); 

clickBtn.addEventListener('click', (event) => { 
    event.preventDefault(); 
    const cloneField = field.cloneNode(true); 
    cloneField.id = i++; 
    field.parentNode.appendChild(cloneField); 
}); 

deleteField.addEventListener('click', (e) => { 
    e.preventDefault(); 
    field.parentNode.removeChild(field); 
}); 

Спасибо передовой!

Answer 1

Проблема заключается в том, что cloneMethod не клонирует обработчики событий:

Клонирование узла копии всех его атрибутов и их значений, включая внутренних (в линию) слушателей. Он не копирует событие слушателей, добавленных с помощью addEventListener() или объектов, присвоенных элементу .

Вы можете сделать что-то вроде этого:

https://jsfiddle.net/q3Lz997m/2/

const clickBtn = document.querySelector('#addingPerson'); 
const field = document.querySelector('#inputPerson'); 
let i = 0; 

const deleteField = document.querySelector('.deletePerson'); 

function deleteDiv(e) { 
    e.preventDefault(); 
    d = e.target.parentNode.parentNode.parentNode.parentNode; 
    d.parentNode.removeChild(d); 
} 

function cloneDiv(event) { 
    event.preventDefault(); 
    const cloneField = field.cloneNode(true); 
    cloneField.id = i++; 
    e = cloneField.querySelector('#addingPerson'); 
    e.addEventListener('click', cloneDiv); 
    e = cloneField.querySelector('.deletePerson'); 
    e.addEventListener('click', deleteDiv); 
    field.parentNode.appendChild(cloneField); 
} 

clickBtn.addEventListener('click', cloneDiv); 
deleteField.addEventListener('click', deleteDiv); 

И немного сокращенный вариант https://jsfiddle.net/q3Lz997m/3/:

function addEventListeners(e) { 
    e.querySelector('#addingPerson').addEventListener('click', cloneDiv); 
    e.querySelector('.deletePerson').addEventListener('click', deleteDiv); 
} 

function deleteDiv(e) { 
    e.preventDefault(); 
    d = e.target.parentNode.parentNode.parentNode.parentNode; 
    d.parentNode.removeChild(d); 
} 

function cloneDiv(e) { 
    e.preventDefault(); 
    p = e.target.parentNode.parentNode.parentNode.parentNode; 
    cloneField = p.cloneNode(true); 
    addEventListeners(cloneField); 
    p.parentNode.appendChild(cloneField); 
} 

addEventListeners(document.querySelector('#inputPerson')); 

Кроме того, я не думаю, что вам нужно preventDefault(), если ваши кнопки не находятся внутри формы.