Selvsletning af nye elementer i JavaScript

I den forrige lektion lærte vi at gøre det, så elementer sletter sig selv ved et klik.

Lad os nu antage, at der oprindeligt ikke er nogen elementer i forælderen:

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

Lad os i en løkke oprette 9 nye afsnit, og gøre det sådan, at ethvert afsnit slettes ved at klikke på det:

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

Følgende kode er givet:

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

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

Gør det sådan, at når der klikkes på knappen, tilføjes et nyt element til listen. Gør det sådan, at enhver li slettes ved at klikke på den. Dette gælder både for de li, som allerede er på listen, og for nye, der er oprettet efter at have klikket på knappen.