Auto-eliminazione di nuovi elementi in JavaScript

Nella lezione precedente abbiamo imparato a fare in modo che gli elementi si eliminino da soli al click.

Ora supponiamo che inizialmente non ci siano elementi nel genitore:

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

Creiamo 9 nuovi paragrafi in un ciclo, e facciamo in modo che qualsiasi paragrafo venga eliminato al click su di esso:

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

Dato il seguente codice:

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

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

Fai in modo che cliccando sul pulsante venga aggiunto un nuovo elemento alla lista. Fai in modo che qualsiasi li venga eliminata cliccando su di essa. Ciò vale sia per le li che sono già presenti nella lista, sia per quelle nuove, create dopo aver cliccato sul pulsante.