Elementlarni bir vaqtning o'zida tahrirlash va o'chirish

Faraz qilaylik, bizda ma'lum bir abzatslar to'plami mavjud:

<div id="parent">
	<p>matn1</p>
	<p>matn2</p>
	<p>matn3</p>
</div>

Keling, ushbu abzatslar uchun har bir abzats matnini tahrirlash mumkin bo'lgan va shu bilan birga har bir abzats oxirida o'chirish uchun havola joylashgan qilaylik.

Tasvirlangan vazifani amalga oshirishda bizni muayyan muammo kutmoqda.

Muammoning mohiyatini tushunish uchun keling, har bir abzats oxiriga o'chirish havolalari qo'shilganda hosil bo'ladigan HTML kodni ko'rib chiqaylik:

<div id="parent">
	<p>matn1<a href="">o'chirish</a></p>
	<p>matn2<a href="">o'chirish</a></p>
	<p>matn3<a href="">o'chirish</a></p>
</div>

Endi tasavvur qilaylik, har qanday abzatsga bosilsa, uning ichida matnni tahrirlash uchun input paydo bo'ladi. Bu holda inputga butun abzats matni - shu jumladan o'chirish havolasi ham kiradi!

Bu, albatta, to'g'ri emas.

Yanada muvaffaqiyatli yechim abzats matnlarini span teglariga o'rab qo'yish bo'ladi, mana shu tarzda:

<div id="parent">
	<p><span>matn1</span><a href="">o'chirish</a></p>
	<p><span>matn2</span><a href="">o'chirish</a></p>
	<p><span>matn3</span><a href="">o'chirish</a></p>
</div>

Bunday kod uchun soddagina tahrirlash hodisasini abzatsning o'ziga emas, balki matnli span tegiga bog'lash mumkin. Bu holda tahrirlash inputi span tegida paydo bo'ladi va bizning o'chirish havolamiz o'zgarishsiz qoladi.

Quyidagi HTML kod berilgan:

<div id="parent">
	<p><span>matn1</span></p>
	<p><span>matn2</span></p>
	<p><span>matn3</span></p>
</div>

Har bir abzats oxiriga o'chirish havolasini qo'shing.

span tegiga bosilganda uning ichida tahrirlash inputi paydo bo'lishini ta'minlang.

Faraz qilaylik, endi boshlang'ichda span teglari yo'q:

<div id="parent">
	<p>matn1</p>
	<p>matn2</p>
	<p>matn3</p>
</div>

Avval abzats matnini span teglariga o'rab qo'ying, ushbu teglarga tahrirlash imkoniyatini qo'shing, so'ngra har bir abzats oxiriga o'chirish havolasini qo'shing.