JavaScriptda yangi elementlarni o'zi-o'zini o'chirishi

Oldingi darsda biz siz bilan elementlarning o'zini-o'zi bosish orqali o'chirilishini qilishni o'rgandik.

Endi esa, aslida ota-elementda elementlar bo'lmasin:

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

Keling, tsikl ichida 9 ta yangi abzas yaratamiz, va shunday qilaylikki, har qanday abzas o'zining ustiga bosish orqali o'chib ketadi:

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

Quyidagi kod berilgan:

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

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

Tugmani bosish orqali ro'yxatga yangi element qo'shilishini ta'minlang. Har qanday li element uning ustiga bosish orqali o'chiriladigan qiling. Bu gap ro'yxatda allaqachon mavjud bo'lgan li elementlar, shuningdek tugmani bosishdan keyin yaratilgan yangi elementlar uchun ham amal qiladi.