Deleting the note

This second feature is a bit more complicated because we need a new method:

1. Add a button element after the rename text input:

      <button @click="removeNote" title="Remove note"><i        
      class="material-icons">delete</i></button>

As you can see, we listen to the click event with the v-on shorthand (the @ character) that calls the removeNote method that we will create very soon. Also, we put an appropriate icon as the button content.

1. Add a new removeNote method that asks the user for confirmation and then removes the currently selected note from the notes array using the splice standard array method:

      removeNote () {
        if (this.selectedNote && confirm('Delete the note?')) {
          // Remove the note in the notes array
          const index = this.notes.indexOf(this.selectedNote)
          if (index !== -1) {
            this.notes.splice(index, 1)
          }
        }
      }

Now, if you try deleting the current note, you should note that the following three things happen:

• The note is removed from the note list on the left
• The text editor and the preview pane are hidden
• The note list has been saved according to the browser console