Let's now make it so that the note can be deleted.
To do this, add a cross to the end of our
li-s to remove:
<ul id="notes">
<li data-key="1">note 1 <span>X</span></li>
<li data-key="2">note 2 <span>X</span></li>
<li data-key="3">note 3 <span>X</span></li>
</ul>
Such an addition, however, would have a problem. The fact is that a click on the cross will be at the same time on the li too. But we have show of the note attached to li.
That is, it turns out that by clicking on the cross, the note will be deleted, and then it will want to appear - but it will no longer be able, since we deleted the note.
The simplest solution would be to separate the
opening of the note and its removal. To do this,
we will also put the li text in own span:
<ul id="notes">
<li data-key="1">
<span class="open">note 1</span>
<span class="remove">X</span>
</li>
<li data-key="2">
<span class="open">note 2</span>
<span class="remove">X</span>
</li>
<li data-key="3">
<span class="open">note 3</span>
<span class="remove">X</span>
</li>
</ul>
Now, in the JavaScript code, when creating a li,
we will have to bind the display of the note not
to the li itself, but to the span with the
open class.
Implement the described deletion of records.
Make it so that after deleting a note, a message is displayed in some tag stating that the note was successfully deleted.