Пусть у нас есть некоторый набор абзацев:
<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,
добавьте к этим тегам возможность редактирования,
а затем добавьте в конец каждого абзаца ссылку
на удаление.