Zelfverwijdering van nieuwe elementen in JavaScript

In de vorige les hebben we geleerd hoe we kunnen maken dat elementen zichzelf verwijderen bij een klik.

Stel dat er nu initieel geen elementen in de ouder zijn:

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

Laten we in een lus 9 nieuwe alinea's maken, en ervoor zorgen dat elke alinea wordt verwijderd bij een klik erop:

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

Gegeven de volgende code:

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

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

Zorg ervoor dat bij een klik op de knop een nieuw element aan de lijst wordt toegevoegd. Zorg ervoor dat elke li wordt verwijderd bij een klik eraar. Dit geldt zowel voor de li die al in de lijst aanwezig zijn, als voor nieuwe, die zijn gemaakt na het klikken op de knop.