Jauno elementu pašdzēšana JavaScript

Iepriekšējā nodarbībā mēs ar jums iemācījāmies padarīt tā, lai elementi dzēstu paši sevi, uz tiem noklikšķinot.

Tagad pieņemsim, ka vecākā elementā sākotnēji nav elementu:

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

Izveidosim cilpā 9 jaunus rindkopas elementus, un vienlaikus panāksim, lai jebkurš rindkopas elements tiktu izdzēsts, uz tā noklikšķinot:

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

Dots šāds kods:

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

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

Iestatiet tā, lai, noklikšķinot uz pogas, sarakstam tiktu pievienots jauns elements. Iestatiet tā, lai jebkurš li elements tiktu izdzēsts, uz tā noklikšķinot. Runājām gan par tiem li elementiem, kas jau atrodas sarakstā, gan par jaunajiem, kas izveidoti pēc pogas nospiešanas.