7. Step 7 - Implement the Delete Use Case

The user interface for the Delete use case just has a select field for choosing the book to be deleted:

<main>
 <form id="Book">
  <div>
   <label>Select book: <select name="selectBook">
     <option value="">---</option></select>
   </label>
  </div>
  <div><button type="button" name="commit">Delete</button></div>
 </form>
</main>

Like in the Update case, the setupUserInterface procedure in the view code in src/v/deleteBook.js loads the book data into main memory, populates the book selection list and adds some event listeners. The event handler for Delete button click events has the following code:

handleDeleteButtonClickEvent: function () {
  const selectEl = document.forms["Book"].selectBook,
        isbn = selectEl.value;
  if (isbn) {
    Book.destroy( isbn);
    // remove deleted book from select options
    selectEl.remove( selectEl.selectedIndex);
  }
}

You can run the minimal app from our server or download the code as a ZIP archive file.