Элементларни бир вақтда таҳрирлаш ва ўчириш

Фарз қилайлик, бизда маълуум бир неча абзацлар бор:

<div id="parent">
	<p>text1</p>
	<p>text2</p>
	<p>text3</p>
</div>

Келинг, бу абзацлар учун ҳар бир абзацнинг матинини таҳрирлаш имкони бўлсин ва шу билан бирга ҳар бир абзацнинг охирида уни ўчириш учун ҳавола туришин қилайлик.

Юқорида тавсифланган вазифани амалга оширишда бизи бир муаммо кутмоқда.

Муаммонинг моҳиятини тушуниш учун, келинг ҳар бир абзацнинг охирига ўчириш ҳаволаси қўшилганда ҳосил бўладиган HTML кодни кўрамиз:

<div id="parent">
	<p>text1<a href="">remove</a></p>
	<p>text2<a href="">remove</a></p>
	<p>text3<a href="">remove</a></p>
</div>

Энди тасаввур қилайлик, ҳар қандай абзацни босганда унда матнни таҳрирлаш учун инпут пайдо бўлади. Бунда инпутга абзацнинг тўлиқ матини - ўчириш ҳаволаси билан бирга киритилади!

Бу, албатта, тўғри эмас.

Яхшироқ ечим бўлар эди, абзацлар матнини span тегларига ўраб қўйиш, мана бу йўл билан:

<div id="parent">
	<p><span>text1</span><a href="">remove</a></p>
	<p><span>text2</span><a href="">remove</a></p>
	<p><span>text3</span><a href="">remove</a></p>
</div>

Бундай код учун таҳрирлаш учун воқеани абзацнинг ўзига эмас, балки матнли span тегига боглаш мумкин. Бунда таҳрирлаш инпути span тегида пайдо бўлади, ва бизнинг ўчириш учун ҳаволамиз ўзгармас қолади.

Қуйидаги HTML код берилган:

<div id="parent">
	<p><span>text1</span></p>
	<p><span>text2</span></p>
	<p><span>text3</span></p>
</div>

Ҳар бир абзацнинг охирига ўчириш учун ҳавола қўшинг.

span устида босилганда унда таҳрирлаш инпути пайдо бўлади қилинг.

Энди бошланғичда span теглари бўлмасин:

<div id="parent">
	<p>text1</p>
	<p>text2</p>
	<p>text3</p>
</div>

Аввал абзац матнини span тегларига ўраб олинг, бу тегларга таҳрирлаш имкониятини богланг, сўнгра ҳар бир абзацнинг охирига ўчириш учун ҳавола қўшинг.