Question

I am trying to implement this example.

Everything works fine until I attempt to delete a certain item.

Using this:

request.onupgradeneeded = function(event) {
      console.log("upgrade", event);

      db = event.target.result;
      console.log("db", db);

      if (!db.objectStoreNames.contains("chatBot")) {
        var objectStore = db.createObjectStore("chatBot", {keyPath: "timeStamp", autoIncrement: true});
      }
    };

and setting up the deletion:

btnDelete.addEventListener("click", function() {
      var id, transaction, objectStore, request;

      id = document.getElementById("txtID").value;
      console.log("id", typeof id);

      transaction = db.transaction("people", "readwrite");
      objectStore = transaction.objectStore("people");
      request = objectStore.delete(id);
      request.onsuccess = function(evt) {
        console.log("deleted content");
      };
    }, false);

There is no problem adding items to the indexedDB but for some reason I can’t figure out why it can’t delete the items.

The id is a string and the objectStore.delete(id) is the correct implementation.

Here is a pastebin of the example

Using Firefox 18

Answer 1

Since you are using autoIncrement key, the key is generated by the user agent. In FF and Chrome, it is integer starting with 1. If you give valid key and convert your id to integer, your code run fine. I tested in both FF and Chrome (dartium). '1' and 1 are different keys according to IndexedDB API key definition.

Another issue IndexedDB API design. The delete methods always return to success event handler with undefined as result whether given key was deleted or not. So it is very difficult to debug. I think it should return number of deleted records at least.

[Edit] mod code: http://pastebin.com/mLpU0VfP
[Edit… also] Notice the + which converts the string to an integer
request = db.transaction("people", "readwrite").objectStore("people").delete(+id);