HTML IndexedDB Delete

Introduction

IndexedDB is a low-level browser API for storing large amounts of structured data on the client—including files, blobs, and complex JavaScript objects. As your app evolves, you need to delete outdated records, clear caches, and sometimes remove entire object stores.

This tutorial focuses specifically on deleting data from IndexedDB: removing one record with delete(), wiping a store with clear(), dropping object stores during version upgrades, and handling errors safely.

What You’ll Learn

What Is IndexedDB?

IndexedDB is a transactional, key-value database built into modern browsers. Data is organized in object stores (like tables) inside a named database. Each record is a JavaScript object keyed by a keyPath or auto-generated id.

Unlike localStorage, IndexedDB supports indexes, large datasets, and asynchronous operations. It is the recommended client-side storage API for offline-capable web apps, replacing the deprecated Web SQL standard.

Understanding Deletion in IndexedDB

Deletion in IndexedDB can mean different things depending on your goal:

• Delete one record — remove a single item by its primary key with store.delete(key).
• Clear a store — remove every record but keep the object store schema with store.clear().
• Delete an object store — remove the entire store (and its indexes) during onupgradeneeded with db.deleteObjectStore(name).
• Delete the whole database — wipe everything for your origin with indexedDB.deleteDatabase(name) (advanced; use with care).

Choose the narrowest operation that meets your need. Deleting one cart item is delete(); logging out and wiping local cache might be clear() on several stores.

Deleting Data from IndexedDB

To delete a specific record, open the database, start a readwrite transaction, and call delete() with the record’s key:

const request = indexedDB.open('myDatabase', 1);

request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction(['contacts'], 'readwrite');
  const store = tx.objectStore('contacts');

  const deleteRequest = store.delete(1); /* keyPath id = 1 */

  deleteRequest.onsuccess = function () {
    console.log('Record deleted successfully');
  };

  deleteRequest.onerror = function (event) {
    console.error('Delete failed:', event.target.error.message);
  };
};

request.onerror = function (event) {
  console.error('Open failed:', event.target.error.message);
};

The key you pass to delete() must match the store’s keyPath type—a number for id, a string if your keys are strings, and so on.

Deleting All Records

When you need to empty an object store without dropping its schema, use clear()—it is faster than deleting keys one by one:

const tx = db.transaction(['contacts'], 'readwrite');
const store = tx.objectStore('contacts');

const clearRequest = store.clear();

clearRequest.onsuccess = function () {
  console.log('All records removed from contacts store');
};

clearRequest.onerror = function (event) {
  console.error('Clear failed:', event.target.error.message);
};

tx.oncomplete = function () {
  console.log('Transaction committed');
};

clear() keeps indexes and the store definition intact—only the data rows are removed. Always confirm with the user before clearing large datasets.

Deleting Object Stores

To remove an entire object store, bump the database version and call deleteObjectStore() inside onupgradeneeded:

const request = indexedDB.open('myDatabase', 2); /* version 1 → 2 */

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  if (db.objectStoreNames.contains('oldStore')) {
    db.deleteObjectStore('oldStore');
    console.log('Object store removed');
  }
};

Version upgrades run for every user who opens the app. Plan migrations carefully—deleting a store destroys all its data permanently for that user.

Handling Errors

Handle errors when opening the database, on each delete request, and on the transaction. Use error.message, not legacy errorCode:

function deleteContact(db, id) {
  return new Promise(function (resolve, reject) {
    const tx = db.transaction(['contacts'], 'readwrite');
    const delReq = tx.objectStore('contacts').delete(id);

    delReq.onsuccess = function () { resolve(); };
    delReq.onerror = function () { reject(delReq.error); };
    tx.onerror = function () { reject(tx.error); };
  });
}

deleteContact(db, 42)
  .then(function () { console.log('Deleted id 42'); })
  .catch(function (err) { console.error(err.message); });

Note: delete() on a missing key still succeeds—there is no “rows affected” count. Call get(key) first if you need to verify the record existed.

Common Pitfalls

1. Wrong transaction mode — delete() and clear() require 'readwrite'. A readonly transaction will fail.
2. Version upgrades — dropping object stores only works in onupgradeneeded with a higher version number.
3. Silent missing keys — deleting a non-existent key does not throw; confirm existence with get() if your UI needs feedback.
4. No undo — committed deletes are permanent unless you have a server backup or soft-delete pattern.
5. clear() is destructive — one call wipes every record in the store; double-check store name and user intent.

Examples Gallery

These examples demonstrate IndexedDB delete patterns. Use Try It Yourself to run live demos in the editor.

const tx = db.transaction(['contacts'], 'readwrite');
const deleteReq = tx.objectStore('contacts').delete(1);

deleteReq.onsuccess = function () {
  console.log('Contact id 1 deleted');
};

deleteReq.onerror = function (event) {
  console.error('Error:', event.target.error.message);
};

Contact id 1 deleted

function deleteContact(db, id) {
  const tx = db.transaction(['contacts'], 'readwrite');
  const store = tx.objectStore('contacts');

  store.get(id).onsuccess = function (event) {
    if (!event.target.result) {
      console.warn('Contact', id, 'not found');
      return;
    }
    store.delete(id);
  };

  tx.oncomplete = function () {
    console.log('Delete committed for id', id);
  };
}

deleteContact(db, 1);
deleteContact(db, 99); /* not found — warns, no error */

Delete committed for id 1
Contact 99 not found

function clearAllItems(db) {
  return new Promise(function (resolve, reject) {
    const tx = db.transaction(['items'], 'readwrite');
    const clearReq = tx.objectStore('items').clear();

    clearReq.onsuccess = function () {
      console.log('Store emptied');
    };
    tx.oncomplete = function () { resolve(); };
    tx.onerror = function () { reject(tx.error); };
  });
}

clearAllItems(db).then(function () {
  console.log('Ready for fresh data');
});

Store emptied
Ready for fresh data

const request = indexedDB.open('myApp', 2);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  if (db.objectStoreNames.contains('legacyCache')) {
    db.deleteObjectStore('legacyCache');
    console.log('legacyCache store removed');
  }

  if (!db.objectStoreNames.contains('contacts')) {
    db.createObjectStore('contacts', { keyPath: 'id', autoIncrement: true });
  }
};

legacyCache store removed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IndexedDB Delete Example</title>
</head>
<body>
  <h1>IndexedDB Delete Example</h1>
  <button type="button" id="deleteBtn">Delete Record id 1</button>
  <p id="status"></p>

  <script>
    let db;

    const request = indexedDB.open('myDatabase', 1);

    request.onupgradeneeded = function (event) {
      event.target.result.createObjectStore('items', { keyPath: 'id' });
    };

    request.onsuccess = function (event) {
      db = event.target.result;

      const seedTx = db.transaction(['items'], 'readwrite');
      seedTx.objectStore('items').put({ id: 1, value: 'Sample record' });
      seedTx.oncomplete = function () {
        document.getElementById('status').textContent = 'Record ready. Click Delete.';
      };
    };

    document.getElementById('deleteBtn').addEventListener('click', function () {
      const tx = db.transaction(['items'], 'readwrite');
      const delReq = tx.objectStore('items').delete(1);

      delReq.onsuccess = function () {
        document.getElementById('status').textContent =
          'Record id 1 deleted successfully';
      };

      delReq.onerror = function (event) {
        document.getElementById('status').textContent =
          'Error: ' + event.target.error.message;
      };
    });
  </script>
</body>
</html>

Record id 1 deleted successfully

🚀 Common Use Cases

• Remove cart items — delete one product the user removed from their basket.
• Discard drafts — delete unsaved notes or form drafts by id.
• Logout cleanup — clear() session or token stores on sign-out.
• Cache expiry — delete stale rows older than a timestamp (after querying with a cursor).
• Schema migration — drop deprecated object stores during a version upgrade.

📝 Notes

• Deletes require a readwrite transaction on the correct store name.
• delete(key) on a missing key succeeds without error—verify with get() if needed.
• clear() removes all records but keeps the object store and indexes.
• Deletes cannot be undone after the transaction commits.
• Confirm destructive actions in your UI before calling clear().
• Pair with Retrieve to list records before bulk deletes.

💡 Best Practices