HTML Web SQL DELETE

Beginner
⏱️ 10 min read
📚 Updated: Jul 2026
🎯 5 Examples + 3 Try It
DELETE / WHERE / rowsAffected
HTML Web SQL DELETE tutorial — remove rows from a client-side database
Overview

Introduction

Web SQL Database is a browser API that stores structured data in a local SQLite database. The SQL DELETE statement removes rows you no longer need—cleared cart items, revoked sessions, or outdated cache entries. Although Web SQL is deprecated, understanding deletes helps you maintain legacy applications.

This tutorial focuses on deleting data: writing DELETE queries inside transactions, targeting rows with WHERE, checking rowsAffected, and handling errors safely.

What You’ll Learn

01

DELETE

Remove rows.

02

WHERE

Target rows.

03

? bindings

Safe params.

04

rowsAffected

Verify removal.

05

Errors

Handle failure.

06

Transactions

Atomic ops.

Fundamentals

What Is Web SQL?

Web SQL Database is a deprecated browser API for client-side relational storage. It uses SQLite under the hood, so standard SQL statements—including DELETE—work like server-side databases.

The W3C deprecated Web SQL in favor of IndexedDB. Chrome removed it in version 97. Use this page for education and legacy code, not for new projects.

Foundation

Understanding Web SQL Schema

Before deleting records, know which table and columns hold your data. You need a clear schema so your WHERE clause targets the correct rows.

js
const db = openDatabase('myDatabase', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name TEXT)'
  );
  tx.executeSql(
    'INSERT OR IGNORE INTO items (id, name) VALUES (?, ?)',
    [1, 'Sample Record']
  );
});

This creates an items table with id and name, then seeds one row so you have something to delete in the examples below.

Reference

📝 DELETE Syntax

Standard SQL syntax for removing rows:

SQL
DELETE FROM table_name WHERE condition;

In Web SQL, call it through executeSql with bound parameters:

js
tx.executeSql(
  'DELETE FROM items WHERE id = ?',
  [id],
  function (tx, result) { /* success */ },
  function (tx, error)  { /* failure */ }
);

Important rules

  • Always use WHERE when deleting specific rows—without it, every row in the table is removed.
  • Bind values with ? — never concatenate user input into the SQL string.
  • Check result.rowsAffected — zero means no row matched.
  • Deletes are permanent — confirm destructive actions in your UI.
Cheat Sheet

⚡ Quick Reference

OperationCode pattern
Delete one rowDELETE FROM t WHERE id = ?
Delete by nameDELETE FROM t WHERE name = ?
Verify successresult.rowsAffected > 0
No matchrowsAffected === 0 — row not found
Delete all rowsDELETE FROM t (no WHERE — dangerous)
Target
WHERE id = ?

One row

Safe
[id]

? binding

Check
rowsAffected

Confirm hit

Wrapper
db.transaction()

Required

Core Topic

Deleting Records

The DELETE statement removes rows that match your WHERE condition. Wrap the logic in a reusable function:

js
function deleteRecord(id) {
  db.transaction(function (tx) {
    tx.executeSql(
      'DELETE FROM items WHERE id = ?',
      [id],
      function (tx, result) {
        console.log('Deleted rows:', result.rowsAffected);
      },
      function (tx, error) {
        console.error('Delete error:', error.message);
        return true;
      }
    );
  });
}

deleteRecord(1);
  • openDatabase — opens or creates the Web SQL database.
  • transaction — wraps the delete in an atomic unit.
  • executeSql — runs DELETE FROM ... WHERE id = ? with bound parameters.
Reliability

Handling Deletion Errors

Errors can come from invalid SQL, missing tables, or constraint issues. A delete can also “succeed” with rowsAffected === 0 when no row matched—treat that separately from a real error.

js
tx.executeSql(
  'DELETE FROM items WHERE id = ?',
  [id],
  function (tx, result) {
    if (result.rowsAffected === 0) {
      console.warn('No row deleted — id may not exist.');
    } else {
      console.log('Record deleted successfully.');
    }
  },
  function (tx, error) {
    console.error('Error deleting record:', error.message);
    return true;
  }
);
Hands-On

Examples Gallery

These examples use the Web SQL API pattern. Use the Try It Yourself links to run live demos. Web SQL works only in browsers that still expose openDatabase; otherwise the demo shows a clear status message.

📚 Getting Started

Delete a single row by id with bound parameters.

Example 1 — Delete a Single Row

Remove the item with id = 1 from the items table.

js
const db = openDatabase('myDatabase', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name TEXT)');
  tx.executeSql('INSERT OR IGNORE INTO items (id, name) VALUES (?, ?)', [1, 'Sample Record']);

  tx.executeSql(
    'DELETE FROM items WHERE id = ?',
    [1],
    function (tx, result) {
      console.log('Deleted rows:', result.rowsAffected);
    },
    function (tx, error) {
      console.error('Error:', error.message);
    }
  );
});
Try It Yourself

How It Works

The transaction seeds a row, then deletes it. rowsAffected returns 1 when exactly one row was removed.

Example 2 — Reusable deleteRecord Function

Call the same function from buttons, list items, or swipe-to-delete handlers.

js
function deleteRecord(id) {
  db.transaction(function (tx) {
    tx.executeSql(
      'DELETE FROM items WHERE id = ?',
      [id],
      function (tx, result) {
        console.log('Deleted', result.rowsAffected, 'row(s) for id', id);
      },
      function (tx, error) {
        console.error('Delete error:', error.message);
        return true;
      }
    );
  });
}

deleteRecord(1);
deleteRecord(99); /* id 99 does not exist */
Try It Yourself

How It Works

The second call returns 0 rows when id 99 was never inserted—not an error, but worth reporting to the user.

📈 Practical Patterns

Verify deletions, delete by condition, and build a complete demo page.

Example 3 — Detect When No Row Matches

Use rowsAffected to warn when the target id does not exist.

js
function deleteItem(id) {
  db.transaction(function (tx) {
    tx.executeSql(
      'DELETE FROM items WHERE id = ?',
      [id],
      function (tx, result) {
        if (result.rowsAffected === 0) {
          console.warn('No item with id', id);
        } else {
          console.log('Removed item', id);
        }
      }
    );
  });
}

deleteItem(42); /* does not exist */
Try It Yourself

How It Works

Deleting a missing id does not throw an error—it succeeds with zero rows affected. Your UI should distinguish “not found” from “deleted.”

Example 4 — Delete by Condition

Remove all rows matching a column value—for example, clear completed tasks.

js
/* table: tasks (id, title, done INTEGER 0/1) */

function deleteCompletedTasks() {
  db.transaction(function (tx) {
    tx.executeSql(
      'DELETE FROM tasks WHERE done = ?',
      [1],
      function (tx, result) {
        console.log('Cleared', result.rowsAffected, 'completed task(s)');
      }
    );
  });
}
Try It Yourself

How It Works

WHERE done = ? can match multiple rows. rowsAffected reports the total number removed. Double-check your condition before running bulk deletes.

Example 5 — Complete HTML Page

Set up the database, seed a row, and delete it with a button click.

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

  <script>
    if (!window.openDatabase) {
      document.getElementById('status').textContent =
        'Web SQL is not supported in this browser.';
    } else {
      const db = openDatabase('myDatabase', '1.0', 'Test DB', 2 * 1024 * 1024);

      db.transaction(function (tx) {
        tx.executeSql(
          'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name TEXT)'
        );
        tx.executeSql(
          'INSERT OR IGNORE INTO items (id, name) VALUES (?, ?)',
          [1, 'Sample Record']
        );
      });

      document.getElementById('deleteBtn').addEventListener('click', function () {
        deleteRecord(1);
      });

      function deleteRecord(id) {
        db.transaction(function (tx) {
          tx.executeSql(
            'DELETE FROM items WHERE id = ?',
            [id],
            function (tx, result) {
              document.getElementById('status').textContent =
                result.rowsAffected
                  ? 'Deleted id ' + id
                  : 'No row found for id ' + id;
            },
            function (tx, error) {
              document.getElementById('status').textContent =
                'Error: ' + error.message;
              return true;
            }
          );
        });
      }
    }
  </script>
</body>
</html>
Try It Yourself

How It Works

The page seeds id 1 on load. Clicking the button runs deleteRecord(1) and updates the status text on the page.

Applications

🚀 Common Use Cases

  • Clear cart items — remove products the user removed from their basket.
  • Delete drafts — discard unsaved notes or form drafts.
  • Logout cleanup — wipe session or token rows on sign-out.
  • Cache expiry — delete stale rows older than a timestamp.
  • Legacy maintenance — purge records in older Web SQL–based apps.

🧠 How Web SQL DELETE Works

1

Match rows

WHERE id = ? selects rows to remove.

Filter
2

Run DELETE

DELETE FROM table WHERE ... removes matches.

Remove
3

Commit transaction

Rows are gone when the transaction succeeds.

Permanent
=

Row removed

rowsAffected reports how many rows were deleted.

Important

📝 Notes

  • Web SQL is deprecated—use IndexedDB for new apps.
  • Always include WHERE unless you intentionally clear the entire table.
  • Check rowsAffected—zero means no match, not necessarily an error.
  • Bind all dynamic values with ? placeholders.
  • Deletes cannot be undone after the transaction commits.
  • Pair with SELECT to confirm what will be deleted first.
Compatibility

Browser Support

Web SQL was never implemented in Firefox. Chrome removed it in Chrome 97. Safari historically supported it on some versions. Feature-detect with window.openDatabase before running demos.

✓ Baseline · Since HTML

Web SQL API

Web SQL was never implemented in Firefox. Chrome removed it in Chrome 97. Safari historically supported it on some versions. Feature-detect with window.openDatabase before running demos.

25% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
Web SQL API Deprecated

Bottom line: For cross-browser storage today, use IndexedDB.

Pro Tips

💡 Best Practices

✅ Do

  • Use WHERE to target specific rows
  • Bind values with ? placeholders
  • Check result.rowsAffected after every delete
  • Confirm destructive actions in the UI
  • Handle error callbacks and return true to roll back
  • Prefer IndexedDB for new projects

❌ Don’t

  • Omit WHERE unless you mean to wipe the table
  • Concatenate user input into SQL strings
  • Assume success when rowsAffected is 0
  • Delete without user confirmation for important data
  • Skip transactions around executeSql calls
  • Build new features on Web SQL in 2026
Wrap Up

Conclusion

Deleting records with Web SQL means running DELETE FROM ... WHERE ... inside db.transaction, binding values safely, and checking rowsAffected to confirm the right rows were removed.

Although Web SQL is deprecated, understanding deletes helps you maintain older systems. For new projects, use IndexedDB—but the SQL habits you learned here (safe parameters, WHERE clauses, and row counts) apply everywhere.

Try delete in the editor Next: INSERT new rows
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about Web SQL DELETE

Use these points when removing rows from a client-side database.

5
Core concepts
🗑️ 01

DELETE

Remove rows.

Basics
🎯 02

WHERE

Target id.

Filter
🔒 03

? bindings

Safe params.

Security
🔢 04

rowsAffected

Verify hit.

Reliability
⚠️ 05

Permanent

Confirm first.

Safety
🎯 You’re ready to delete rows with Web SQL
Review Quick Reference →

❓ Frequently Asked Questions

Open the database with openDatabase(), then call db.transaction(). Inside the transaction, use tx.executeSql() with DELETE FROM table_name WHERE condition. Bind the id or filter values with ? placeholders: DELETE FROM items WHERE id = ?
Standard SQL: DELETE FROM table_name WHERE condition. Always use WHERE when deleting specific rows—DELETE FROM table_name without WHERE removes every row in the table.
Check result.rowsAffected in the success callback. If it is 0, no row matched your WHERE clause (wrong id or already deleted).
Web SQL requires all executeSql calls within db.transaction(). Transactions keep operations atomic—if a related statement fails, changes can roll back together.
Web SQL is deprecated and removed from most modern browsers (including current Chrome). Treat this tutorial as educational for legacy code; use IndexedDB for new projects.
No. Once a transaction commits, deleted rows are gone unless you kept a backup or can re-fetch from a server. Confirm destructive actions in your UI before deleting.
Did you know?

DELETE FROM table_name without a WHERE clause removes every row in the table but keeps the table structure. That is faster than dropping and recreating the table when you want an empty slate with the same schema.

Practice Web SQL DELETE

Add a sample item, click delete, and watch the status message update in the Try It editor.

Open Try It editor →

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)

6 people found this page helpful

HTML Web SQL Intro HTML Web SQL INSERT