Αυτο-διαγραφή νέων στοιχείων σε JavaScript

Στο προηγούμενο μάθημα μάθαμε πώς να κάνουμε τα στοιχεία να διαγράφονται μόνα τους με κλικ.

Ας υποθέσουμε τώρα ότι αρχικά δεν υπάρχουν στοιχεία στον γονέα:

<div id="parent"></div>

Ας δημιουργήσουμε σε έναν βρόχο 9 νέες παραγράφους, και ας κάνουμε έτσι ώστε οποιαδήποτε παράγραφος να διαγράφεται με κλικ πάνω της:

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let p = document.createElement('p');
	p.textContent = i;
	
	p.addEventListener('click', function() {
		this.remove();
	});
	
	parent.appendChild(p);
}

Δίνεται ο ακόλουθος κώδικας:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<input type="submit" id="button">

Κάντε έτσι ώστε με κλικ στο κουμπί να προστίθεται ένα νέο στοιχείο στη λίστα. Κάντε έτσι ώστε οποιοδήποτε li να διαγράφεται με κλικ πάνω του. Μιλάμε τόσο για εκείνα τα li που ήδη βρίσκονται στη λίστα, όσο και για τα νέα, που δημιουργήθηκαν μετά από πάτημα στο κουμπί.