Едновременно редактиране и изтриване на елементи

Да предположим, че имаме някакъв набор от параграфи:

<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, добавете към тези тагове възможност за редактиране, и след това добавете в края на всеки параграф връзка за изтриване.