Vetë-fshirja e elementeve të rinj në JavaScript

Në mësimin e mëparshëm mësuam si të bëjmë që elementët të fshinin veten kur klikohet mbi ta.

Supozojmë që tani në elementin prind nuk ka elementë fillimisht:

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

Le të krijojmë 9 paragrafë të rinj në një cikël, dhe në të njëjtën kohë do të bëjmë që çdo paragraf të fshihet kur të klikohet mbi të:

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

Është dhënë kodi në vijim:

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

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

Bëni që me një klik mbi butonin, në listë të shtohet një element i ri. Bëni që çdo li të fshihet duke klikuar mbi të. Bëni fjalë si për ato li që tashmë janë në listë, ashtu edhe për ato të reja, të krijuara pas shtypjes së butonit.