Création de liens pour supprimer des éléments en JavaScript
Supposons maintenant que nous ayons plusieurs paragraphes :
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Faisons en sorte qu'un lien de suppression soit ajouté à la fin de chaque paragraphe.
Pour commencer, implémentons simplement l'ajout des liens :
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
}
Faisons maintenant en sorte qu'un clic sur le lien supprime le paragraphe correspondant :
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault();
});
}
Étant donné une balise ul. Ajoutez à la fin de chaque
balise li un lien pour supprimer cette li
de la liste.
Étant donné un tableau HTML. Ajoutez-y une colonne supplémentaire dans laquelle, pour chaque ligne du tableau, se trouvera un lien pour supprimer cette ligne.