Web SQL lets you remove rows with a normal SQL DELETE statement, run through tx.executeSql() inside a transaction. Target specific rows with WHERE, or empty a table with DELETE FROM table_name (no WHERE—use carefully).
Pair this with SELECT to list rows first, and INSERT to add fresh data afterward. For new apps, prefer IndexedDB delete.
Web SQL is obsolete and removed from modern Chrome. Use this page to maintain legacy code or learn SQL deletes. New projects should use IndexedDB.
DELETE FROM t empties rows but keeps the table. DROP TABLE removes the table itself. Always bind user values with ?—never concatenate SQL strings.
DELETE FROM table_name WHERE conditionIn Web SQL, wrap that statement in executeSql with bound arguments:
tx.executeSql(
'DELETE FROM items WHERE id = ?',
[id],
function (tx, result) { /* success */ },
function (tx, error) { /* failure */ }
);The executeSql call for a delete takes these arguments:
| Argument | Type | Description |
|---|---|---|
sqlStatement | String | The DELETE FROM ... WHERE ... text, with ? placeholders for dynamic values. |
arguments | Array | Values bound to each ? in order—e.g. [id]. |
successCallback | Function (optional) | Called as (tx, result). Inspect result.rowsAffected. |
errorCallback | Function (optional) | Called as (tx, error). Return true to roll back the transaction. |
Always use WHERE for targeted deletes. Bind values with ?—never paste user input into the SQL string.
executeSql does not return a useful value itself. On success, your callback receives (tx, result). For DELETE, use result.rowsAffected to see how many rows were removed.
| Property | Type | Meaning after DELETE |
|---|---|---|
result.rowsAffected | Number | How many rows were deleted |
result.insertId | Number | Not useful for DELETE (used after INSERT) |
result.rows | SQLResultSetRowList | Empty for DELETE (no selected rows) |
rowsAffected values:
| Value | What it means |
|---|---|
0 | No row matched your WHERE (wrong id or already deleted). Not an error. |
1 or more | That many rows were removed successfully. |
A typical single-row delete follows these steps:
openDatabase(name, version, displayName, size).db.transaction(function (tx) { ... }).DELETE via tx.executeSql(sql, args, success, error).rowsAffected in the success callback.true to roll back).db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM contacts WHERE id = ?',
[1],
function (tx, result) {
console.log('Deleted', result.rowsAffected);
},
function (tx, error) {
console.error(error.message);
return true;
}
);
});Seed a sample row, then delete it or clear the table. Status updates below. Many modern browsers no longer support Web SQL—if so, the status box will say so.
Short, copy-ready snippets. Use Try It Yourself for a live editor. Demos need a browser that still exposes openDatabase.
Remove the item whose primary key is 1.
db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM items WHERE id = ?',
[1],
function (tx, result) {
console.log('Deleted', result.rowsAffected, 'row(s)');
}
);
});DELETE ... WHERE id = ? with [1] bound safely.rowsAffected so you know a row was removed.Zero means “not found”—not a thrown error. Show clear UI feedback.
function deleteItem(db, id) {
db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM items WHERE id = ?',
[id],
function (tx, result) {
if (result.rowsAffected === 0) {
console.warn('No row with id', id);
} else {
console.log('Removed id', id);
}
}
);
});
}
deleteItem(db, 99);rowsAffected in the success callback.Omit WHERE to empty the table. The table structure stays. Confirm in the UI first.
db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM items',
[],
function (tx, result) {
console.log('Cleared', result.rowsAffected, 'row(s)');
}
);
});DELETE FROM items with no WHERE.? placeholders.rowsAffected to report how many rows were wiped.Remove every completed task with one statement.
db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM tasks WHERE done = ?',
[1],
function (tx, result) {
console.log('Removed', result.rowsAffected, 'completed task(s)');
}
);
});WHERE done = ? instead of deleting one id at a time.1 (or your “done” flag value) safely.Seed a record on load, then delete it from a button click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web SQL Delete Demo</title>
</head>
<body>
<h1>Web SQL DELETE</h1>
<button type="button" id="deleteBtn">Delete id 1</button>
<p id="status">Opening…</p>
<script>
var statusEl = document.getElementById('status');
if (!window.openDatabase) {
statusEl.textContent = 'Web SQL is not available in this browser.';
} else {
var db = openDatabase('deleteDemoDb', '1.0', 'Demo', 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, value TEXT)');
tx.executeSql('INSERT OR REPLACE INTO items (id, value) VALUES (?, ?)', [1, 'Sample']);
}, null, function () {
statusEl.textContent = 'Ready. Click Delete.';
});
document.getElementById('deleteBtn').addEventListener('click', function () {
db.transaction(function (tx) {
tx.executeSql(
'DELETE FROM items WHERE id = ?',
[1],
function (tx, result) {
statusEl.textContent = 'Deleted ' + result.rowsAffected + ' row (id 1).';
}
);
});
});
}
</script>
</body>
</html>openDatabase before running any SQL.DELETE ... WHERE id = ?.rowsAffected.Most DELETE bugs come from a missing WHERE, unbound input, or ignoring rowsAffected.
DELETE FROM items wipes every row. Always double-check the clause before shipping.
?Never build SQL with string concatenation from user input. Pass values in the arguments array.
A successful callback with zero rows means nothing matched—show a “not found” message.
All executeSql calls belong inside db.transaction() (or readTransaction for reads).
Feature-detect window.openDatabase. Modern Chrome has no Web SQL—point users to IndexedDB.
Web SQL is a deprecated client-side API. Firefox never shipped it. Chrome removed it (about Chrome 97+). Detect with window.openDatabase before running demos.
Educational / legacy only. Prefer IndexedDB store.delete() and clear() for new production apps.
Bottom line: For deletes in new web apps, use IndexedDB delete. Keep Web SQL only for maintaining old codebases.
DELETE FROM t WHERE id = ? inside db.transaction().result.rowsAffected in the success callback.?—never concatenate user input.One line: delete with DELETE FROM t WHERE ... via executeSql, check rowsAffected, prefer IndexedDB going forward.
Add new rows with INSERT INTO after you clear or delete old data.
10 people found this page helpful