Истовремено уредување и бришење на елементи

Нека имаме одреден сет на параграфи:

<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>

Замислете сега, дека при клик на кој било параграф во него ќе се појави input за уредување на текстот. Во овој случај во input ќе влезе целиот текст на параграфот - заедно со линкот за бришење!

Ова, се разбира, не е правилно.

Подобро решение би било да се обвие текстот на параграфите во тагови 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 со текстот. Во овој случај input за уредување ќе се појави во тагот span, а нашиот линк за бришење ќе остане недопрен.

Даден е следниот HTML код:

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

Додадете линк за бришење на крајот од секој параграф.

Направете така што при клик на span во него да се појави input за уредување.

Нека сега првично нема тагови span:

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

Прво обвијте го текстот на параграфот во тагови span, додадете на овие тагови можност за уредување, а потоа додадете на крајот од секој параграф линк за бришење.