deletebutton dans child et addbutton dans child ne fonctionnent pas

Question

J'ai un problème avec mon code. le bouton d'ajout dans le parent fonctionne, il ajoute bien. mais dans l'enfant, le bouton d'ajout ne fonctionne pas, même chose pour le bouton de suppression. le bouton de suppression de mon navigateur fonctionne uniquement dans le parent, et lorsque je clique sur le bouton de suppression, il supprime tous les champs que j'ai ajoutés auparavant et actualise le site. Bien que j'ai ajouté le preventDefault. Est-ce autorisé à utiliser preventDefault multiplier fois dans un fichier?

Voici mon code: https://jsfiddle.net/q3Lz997m/

code-fichier:

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); 
}); 

Merci à l'avance!

Answer 1

Le problème est que cloneMethod ne écoute d'événement clone non:

Le clonage d'un nœud copie tous ses attributs et leurs valeurs, y compris intrinsèques (en ligne) les auditeurs. Il ne copie pas les écouteurs d'événement ajoutés en utilisant addEventListener() ou ceux affectés aux propriétés de l'élément .

Vous pouvez faire quelque chose comme ceci:

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); 

Et une petite version plus courte 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')); 

Aussi, je ne pense pas que vous avez besoin preventDefault() sauf si vos boutons sont à l'intérieur d'un formulaire.