JavaScript'te Yeni Elementlerin Kendi Kendini Silmesi

Önceki derste, elementlerin üzerine tıklandığında kendilerini nasıl silebileceklerini yapmayı öğrendik.

Şimdi, ebeveynde başlangıçta hiç element olmadığını varsayalım:

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

Bir döngü içinde 9 yeni paragraf oluşturalım, ve herhangi bir paragrafın üzerine tıklandığında silinmesini sağlayalım:

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

Aşağıdaki kod verilmiştir:

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

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

Butona tıklandığında listeye yeni bir eleman eklenmesini sağlayın. Herhangi bir li öğesine tıklandığında silinmesini sağlayın. Bu, listede zaten var olan li öğeleri için de, butona tıklandıktan sonra oluşturulan yeni li öğeleri için de geçerli olsun.