Remove book entry

Next we will work on the book deletion.

We begin at the model. We add a removeBook function. It is similar to the ticker removal from the TwentyFive timer.

 app.data.removeBook = function(isbn) {
   for(var i=0, len=app.data.books.length; i<len; i++) {
     var book = app.data.books[i];
     if (book.isbn === isbn) {
       app.data.books.splice(i, 1);
       return; // remove only the first match record
     }
   }
 }

When the delete button is clicked, we remove the book from the model data. Then render the list again to reflect the changes.

The click event of delete button. Since the book entry is created dynamically, normal click event doesn’t work. We need the following jQuery delegate method.

app.view.listElement.delegate('.delete-btn', 'click', function(){
  var isbn = $(this).data('isbn') + ""; // ensure we are dealing with string type.
  app.data.removeBook(isbn);
  app.view.renderList();
});

$(element).click(handler);
// is equivalent to
$(element).bind('click', handler);

$(element).delegate(selector, 'click', handler);

What’s next? We’re going to take a look at “Taking the inputs data”.