子按钮删除按钮和子按钮不起作用

Question

我的代码有问题。父母上的添加按钮正在工作，它增加了罚款。但在小孩中，添加按钮不起作用，对于删除按钮也是如此。我的浏览器中的删除按钮只能在父项中工作，并且当我单击删除按钮时，它将删除我之前添加的所有字段并刷新站点。虽然我添加了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 （），除非你的按钮在表单内。