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:

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

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.

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