Δημιουργία συνδέσμων για διαγραφή στοιχείων σε JavaScript
Ας υποθέσουμε τώρα ότι έχουμε πολλές παραγράφους:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Ας κάνουμε έτσι ώστε σε κάθε παράγραφο να προστίθεται ένας σύνδεσμος διαγραφής στο τέλος της.
Αρχικά, ας υλοποιήσουμε απλά την προσθήκη συνδέσμων:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
}
Ας κάνουμε τώρα έτσι ώστε με το πάτημα στον σύνδεσμο, να διαγράφεται η αντίστοιχη παράγραφος:
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();
});
}
Δίνεται η ετικέτα ul. Προσθέστε στο τέλος κάθε
ετικέτας li έναν σύνδεσμο για διαγραφή αυτού του li
από τη λίστα.
Δίνεται ένας πίνακας HTML. Προσθέστε σε αυτόν άλλη μια στήλη, στην οποία για κάθε σειρά του πίνακα θα υπάρχει ένας σύνδεσμος για διαγραφή αυτής της σειράς.