HTML IndexedDB Delete

Beginner
8 min read
Updated: Nov 2026
5 examples
Live preview
HTML IndexedDB delete — remove records with store.delete and clear
Definition

Definition and Usage

IDBObjectStore.delete() removes one or more records from an IndexedDB object store. Pass a primary key or an IDBKeyRange. To empty a store without dropping it, use clear(). To drop the store itself, call deleteObjectStore() during a version upgrade.

Deletes run inside a readwrite transaction. Pair this with retrieve to list keys first, and insert to add fresh data afterward.

Baseline · Widely available.

Not deprecated. IndexedDB delete() has been stable across browsers since about July 2015. Also available in Web Workers.

Related APIs.

clear() wipes all rows in a store. IDBCursor.delete() removes the current cursor row without looking up the key again. indexedDB.deleteDatabase() removes the whole database for the origin.

Syntax

Syntax

syntax.js
store.delete( key)

Call delete() on an object store from a readwrite transaction. For every record in the store: store.clear(). For the store itself: db.deleteObjectStore(name) inside onupgradeneeded.

Reference

Parameters

The delete() method takes one argument:

ParameterTypeDescription
keyKey or IDBKeyRangePrimary key of the record to remove, or a key range to remove several records. Required (do not pass null).

The key type must match the store’s keyPath (number, string, etc.). clear() takes no parameters.

Result

Return Value

Returns an IDBRequest. On success, request.result is undefined—there is no count of deleted rows. Listen with request.onsuccess / request.onerror, or wait for transaction.oncomplete.

ExceptionWhen it is thrown
ReadOnlyErrorTransaction mode is readonly
TransactionInactiveErrorThe transaction is no longer active
DataErrorThe key or key range is invalid
InvalidStateErrorThe object store was deleted
Flow

How It Works

A typical single-record delete follows these steps:

  1. Open the database with indexedDB.open(name, version).
  2. Start a write tx: db.transaction(['store'], 'readwrite').
  3. Get the store: tx.objectStore('store').
  4. Call delete(key) (or clear() for all rows).
  5. Handle success or error on the request; the change commits when the transaction completes.
JS
const tx = db.transaction(['contacts'], 'readwrite');
const store = tx.objectStore('contacts');
const req = store.delete(1);

req.onsuccess = () => console.log('Deleted');
req.onerror = () => console.error(req.error);
Try it

Live Preview

Seed a sample contact, then delete it or clear the store. Status updates below.

Uses a private demo database in this browser. Safe to click repeatedly.

Status

Opening database…

Code

Examples

Short, copy-ready snippets. Use Try It Yourself for a live editor.

Example 1 — Delete a Record by Key

Remove the contact whose primary key is 1.

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

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

req.onerror = function () {
  console.error('Error:', req.error.message);
};
Try It Yourself

How It Works

  1. Open a write transaction on the contacts store.
  2. Call delete(1) with the primary key.
  3. Listen for success to update the UI or log a message.
  4. Handle errors with req.onerror if the transaction fails.

Example 2 — Check Before Delete

delete() succeeds even when the key is missing. Use get() first for clear feedback.

JS
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('Done for id', id);
  };
}

deleteContact(db, 1);
Try It Yourself

How It Works

  1. Read with get(id) in the same transaction.
  2. If missing, warn and skip the delete.
  3. If found, call store.delete(id).
  4. Wait for oncomplete so the write is committed.

Example 3 — Clear All Records

Empty the store in one call. The schema and indexes stay intact.

JS
const tx = db.transaction(['items'], 'readwrite');
const req = tx.objectStore('items').clear();

req.onsuccess = function () {
  console.log('Store emptied');
};

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

How It Works

  1. Open a readwrite transaction on the target store.
  2. Call clear() with no arguments.
  3. Confirm in the UI before clearing large datasets.
  4. Use oncomplete when you need to know the wipe finished.

Example 4 — Delete a Key Range

Pass an IDBKeyRange to remove several keys in one request.

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

/* delete keys from 1 through 10 (inclusive) */
const range = IDBKeyRange.bound(1, 10);
const req = store.delete(range);

req.onsuccess = function () {
  console.log('Keys 1–10 removed');
};
Try It Yourself

How It Works

  1. Build a range with IDBKeyRange.bound(lower, upper).
  2. Pass the range to delete() instead of a single key.
  3. All matching keys in that range are removed.
  4. Still no row count on success—result stays undefined.

Example 5 — Complete HTML Page

Seed a record on load, then delete it from a button click.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IndexedDB Delete Demo</title>
</head>
<body>
  <h1>IndexedDB Delete</h1>
  <button type="button" id="deleteBtn">Delete id 1</button>
  <p id="status">Opening…</p>

  <script>
    let db;
    const openReq = indexedDB.open('deleteDemoDb', 1);

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

    openReq.onsuccess = function (event) {
      db = event.target.result;
      const tx = db.transaction(['items'], 'readwrite');
      tx.objectStore('items').put({ id: 1, value: 'Sample' });
      tx.oncomplete = function () {
        document.getElementById('status').textContent = 'Ready. Click Delete.';
      };
    };

    document.getElementById('deleteBtn').addEventListener('click', function () {
      const tx = db.transaction(['items'], 'readwrite');
      const req = tx.objectStore('items').delete(1);
      req.onsuccess = function () {
        document.getElementById('status').textContent = 'Record id 1 deleted.';
      };
    });
  </script>
</body>
</html>
Try It Yourself

How It Works

  1. Create the store in onupgradeneeded if needed.
  2. Seed id 1 after the database opens.
  3. On button click, run store.delete(1) in a write transaction.
  4. Update the status text so the user sees the result without the console.

Edge Cases & Pitfalls

Most delete bugs come from the wrong transaction mode or assuming a missing key fails.

mode

Need readwrite

delete() and clear() throw ReadOnlyError in a readonly transaction.

silent

Missing keys succeed

Deleting a key that was never stored does not error. Use get() when you need existence checks.

schema

Drop stores only on upgrade

deleteObjectStore() works only inside onupgradeneeded with a higher version number.

safety

No undo after commit

Confirm destructive actions—especially clear() and deleteDatabase()—in the UI first.

cursor

Prefer cursor.delete when iterating

While walking with openCursor(), cursor.delete() removes the current row without a separate key lookup.

Compatibility

Browser Support

IndexedDB delete(), clear(), and related APIs are standard Web Storage features in modern browsers—not a Node.js, Deno, or Bun API.

✓ Baseline · Widely available

IndexedDB delete()

Widely available since about July 2015. Chrome, Firefox, Safari, Edge, and Opera support delete(), clear(), and deleteObjectStore() during upgrades.

96% Global support (approx.)
Google Chrome 24+
Full support
Mozilla Firefox 16+
Full support
Apple Safari 10+
Full support
Microsoft Edge 12+
Full support
Opera 15+
Full support
Samsung Internet 1.5+
Full support
Internet Explorer 10+
Partial / older
IndexedDB delete() Widely supported

Bottom line: Safe to use IndexedDB deletes in production web apps. Prefer feature detection with window.indexedDB for very old browsers.

Remember

Key Takeaways

  • One record: store.delete(key) inside a readwrite transaction.
  • All records: store.clear() keeps the store schema and indexes.
  • Silent miss: deleting a missing key still succeeds—check with get() when needed.
  • Schema: drop stores only with deleteObjectStore() during onupgradeneeded.

One line: delete with store.delete(key) in a readwrite transaction; confirm before clear().

Frequently Asked Questions

Open a readwrite transaction on the object store, then call store.delete(key) with the record's primary key. Example: store.delete(1) removes the record whose keyPath value is 1.
delete(key) removes one record (or a key range). clear() removes every record in the store but keeps the store and its indexes. Use clear() to empty a store; use delete() for specific keys.
delete() still succeeds. There is no error and no "rows affected" count. Call store.get(key) first if your UI needs a "not found" message.
IndexedDB only allows write operations (delete, clear, put, add) inside readwrite transactions. A readonly transaction throws ReadOnlyError.
Bump the database version in indexedDB.open(name, newVersion) and call db.deleteObjectStore('storeName') inside onupgradeneeded. That is a schema change, not a normal transaction.
No. After the transaction commits, the data is gone unless you kept a backup or can re-fetch from a server. Confirm destructive actions in the UI first.

Next: IndexedDB Insert

Add new records with add() and put() after you clear or delete old data.

Insert tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

HTML IndexedDB Intro HTML IndexedDB Insert