# Removing notes in a notepad in JavaScript

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.

↑
en ru