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.

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

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.

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

Note: The click event equivalent.

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

And delegate event is very similar to the bind event:

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

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

◀ Cloning with data Taking the inputs data ▶

Remove book entry

Makzan | Mobile web app dev with phonegap | Table of Content