мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

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

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