Давайте теперь сделаем так, чтобы запись
можно было удалить. Для этого нашим li
в конец добавим крестик для удаления:
<ul id="notes">
<li data-key="1">запись 1 <span>X</span></li>
<li data-key="2">запись 2 <span>X</span></li>
<li data-key="3">запись 3 <span>X</span></li>
</ul>
Такое добавление, однако, будет иметь проблему. Дело в том, что клик по крестику будет одновременно кликом по лишке. А лишке у нас привязан показ записи.
То есть получится, что по нажатию на крестик запись удалится, а потом захочет показаться - но уже не сможет, так как запись-то мы удалили.
Самым простым решением будет разделить открывание
записи и ее удаление. Для этого текст лишки
также положим в свой span:
<ul id="notes">
<li data-key="1">
<span class="open">запись 1</span>
<span class="remove">X</span>
</li>
<li data-key="2">
<span class="open">запись 2</span>
<span class="remove">X</span>
</li>
<li data-key="3">
<span class="open">запись 3</span>
<span class="remove">X</span>
</li>
</ul>
Теперь в JavaScript коде при создании лишки
мы должны будем привязывать показ записи
не к самой лишке, а к спену с классом open.
Реализуйте описанное удаление записей.
Сделайте так, чтобы после удаления записи в какой-нибудь тег выводилось сообщение о том, что запись успешно удалена.