# Одновременное редактирование и удаление элементов

Пусть у нас есть некоторый набор абзацев:

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

←→
↑
en ru