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

Претпоставимо да имамо одређени скуп параграфа:

<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) за уређивање текста. У том случају ће се у уносни елемент сместити цео текст параграфа - заједно са везом за брисање!

То, наравно, није исправно.

Срећније решење би било да се текстови параграфа умотају у тегове 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, додајте овим теговима могућност уређивања, а затим додајте на крај сваког параграфа везу за брисање.