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.
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);
}
}