Selbstentfernung neuer Elemente in JavaScript

In der vorherigen Lektion haben wir gelernt, Elemente so zu gestalten, dass sie sich selbst bei einem Klick entfernen.

Nehmen wir nun an, dass im Elternelement zunächst keine Elemente vorhanden sind:

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

Lassen Sie uns in einer Schleife 9 neue Absätze erstellen und dabei sicherstellen, dass sich jeder Absatz bei einem Klick darauf entfernt:

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

Gegeben ist der folgende Code:

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

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

Sorgen Sie dafür, dass bei einem Klick auf den Button ein neues Element zur Liste hinzugefügt wird. Sorgen Sie dafür, dass sich jedes li-Element bei einem Klick darauf entfernt. Dies betrifft sowohl die li-Elemente, die bereits in der Liste vorhanden sind, als auch die neuen, die nach dem Klick auf den Button erstellt wurden.