Deleting records is almost the same. We need a handler for the delete event:
html5_indexedDB/javascripts/notes.js
$("#delete_button").click(function(event){
vartitle= $("#title");
event.preventDefault();
deleteNote(title.attr("data-id"));
});Then we need the delete() method itself, which removes the record not only
from the database, but also from the list of notes in the sidebar.html5_indexedDB/javascripts/notes.js
vardeleteNote=function(id){
varrequest,store,transaction;id = parseInt(id);transaction= db.transaction(["notes"],"readwrite");
store= transaction.objectStore("notes");
request= store.delete(id);request.onsuccess=function(event){
$("#notes>li[data-id="+ id +"]").remove();
newNote();
};
};This also calls newForm() to clear out the form so we can create a new record
without accidentally duplicating the one we just deleted.Finally, we need to handle clearing out all of the records. We add a click
handler to the Delete All button, like this:html5_indexedDB/javascripts/notes.js
$("#delete_all_button").click(function(event){
clearNotes();
});and have it invoke the clearNotes() method, which removes every record from
our database. The clearNotes() method looks like this, and follows the same
pattern we’ve seen all along:html5_indexedDB/javascripts/notes.js
varclearNotes=function(id){
varrequest,store,transaction;transaction= db.transaction(["notes"],"readwrite");
store= transaction.objectStore("notes");
request= store.clear();Chapter 9. Saving Data on the Client • 200
Download from Wow! eBook <www.wowebook.com> report erratum • discuss