子按鈕刪除按鈕和子按鈕不起作用

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 （），除非你的按鈕在表單內。