title: indexedDB: Delete function is not working
body: <p>in the following set of function which is actually for <code>indexedDb</code>, in this <code>deleteTodo</code> in not working. i wrote down the following code from a site  and in there running example it is perfectly working. but in my code which i wrote down, in that <code>delete</code> function is not deleting that items. I analysed that code found that, as much i know, there is no mistake but since i am new to this technology(<code>indexedDB</code>) so i don't know where is the mistake?</p>
  <p>here is my code:</p>
  <pre><code>&lt;head&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  
  var html5rocks = {};
  html5rocks.indexedDB = {};
  html5rocks.indexedDB.db = null;
  
  html5rocks.indexedDB.open = function() {
    var version = 1;
    var request = indexedDB.open(&quot;todos&quot;, version);
  
    request.onsuccess = function(e) {
      html5rocks.indexedDB.db = e.target.result;
      // Do some more stuff in a minute
    };
  
    request.onerror = html5rocks.indexedDB.onerror;
  };
  html5rocks.indexedDB.open = function() {
    var version = 1;
    var request = indexedDB.open(&quot;todos&quot;, version);
  
    // We can only create Object stores in a versionchange transaction.
    request.onupgradeneeded = function(e) {
      var db = e.target.result;
  
      // A versionchange transaction is started automatically.
      e.target.transaction.onerror = html5rocks.indexedDB.onerror;
  
      if(db.objectStoreNames.contains(&quot;todo&quot;)) {
        db.deleteObjectStore(&quot;todo&quot;);
      }
  
      var store = db.createObjectStore(&quot;todo&quot;,
        {keyPath: &quot;timeStamp&quot;});
    };
  
    request.onsuccess = function(e) {
      html5rocks.indexedDB.db = e.target.result;
      html5rocks.indexedDB.getAllTodoItems();
    };
  
    request.onerror = html5rocks.indexedDB.onerror;
  };
  html5rocks.indexedDB.addTodo = function(todoText) {
    var db = html5rocks.indexedDB.db;
    var trans = db.transaction([&quot;todo&quot;], &quot;readwrite&quot;);
    var store = trans.objectStore(&quot;todo&quot;);
    var request = store.put({
      &quot;text&quot;: todoText,
      &quot;timeStamp&quot; : new Date().getTime()
    });
  
    trans.oncomplete = function(e) {
      // Re-render all the todo's
      html5rocks.indexedDB.getAllTodoItems();
    };
  
    request.onerror = function(e) {
      console.log(e.value);
    };
  };
  html5rocks.indexedDB.getAllTodoItems = function() {
    var todos = document.getElementById(&quot;todoItems&quot;);
    todos.innerHTML = &quot;&quot;;
  
    var db = html5rocks.indexedDB.db;
    var trans = db.transaction([&quot;todo&quot;], &quot;readwrite&quot;);
    var store = trans.objectStore(&quot;todo&quot;);
  
    // Get everything in the store;
    var keyRange = IDBKeyRange.lowerBound(0);
    var cursorRequest = store.openCursor(keyRange);
  
    cursorRequest.onsuccess = function(e) {
      var result = e.target.result;
      if(!!result == false)
        return;
  
      renderTodo(result.value);
      result.continue();
    };
  
    cursorRequest.onerror = html5rocks.indexedDB.onerror;
  };// end of getAllTodoItems
  function renderTodo(row) {
    var todos = document.getElementById(&quot;todoItems&quot;);
    var li = document.createElement(&quot;li&quot;);
    var a = document.createElement(&quot;a&quot;);
        a.href=&quot;#&quot;;
    var t = document.createTextNode(row.text);
    //t.data = row.text;
  
    a.addEventListener(&quot;click&quot;, function(e) {
      html5rocks.indexedDB.deleteTodo(row.text);
    });
  
    a.textContent = &quot; [Delete]&quot;;
    li.appendChild(t);
    li.appendChild(a);
    todos.appendChild(li);
  };
  html5rocks.indexedDB.deleteTodo = function(id) {
    var db = html5rocks.indexedDB.db;
    var trans = db.transaction([&quot;todo&quot;], &quot;readwrite&quot;);
    var store = trans.objectStore(&quot;todo&quot;);
  
    var request = store.delete(id);
  
    trans.oncomplete = function(e) {
      html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen
    };
  
    request.onerror = function(e) {
      console.log(e);
    };
  };
  function init() {
    html5rocks.indexedDB.open(); // open displays the data previously saved
  }
  
  window.addEventListener(&quot;DOMContentLoaded&quot;, init, false);
  function addTodo() {
    var todo = document.getElementById('todo');
  
    html5rocks.indexedDB.addTodo(todo.value);
    todo.value = '';
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;This is an experimental page...&lt;/h1&gt;
  &lt;ul id=&quot;todoItems&quot;&gt;&lt;/ul&gt;
  &lt;input placeholder=&quot;add todo things&quot; id='todo' type=&quot;text&quot; /&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Add Todo Item&quot; onclick=&quot;addTodo(); return false;&quot;&gt;
  &lt;/body&gt;      
  </code></pre>
  <p>and this is the link from where i wrote down this code: <a href="http://www.html5rocks.com/en/tutorials/indexeddb/todo/#" rel="nofollow noreferrer">html5rock</a></p>
  <p>please tell me where i am wrong.<br>
  anyFelp would be great</p>