Delete data from javascript indexedDB

We can remove single or multiple data in the database using the javascript indexedDB function. We can use the key value or id to remove the entire database row.

The procedure of the delete data into javascript indexedDB

The below procedure steps help to delete information. To remove data from the object store, we follow these steps:

First, create a new transaction of the javascript indexedDB.
Second, get an object store with the data and id.
Third, call the delete() method of the object store to delete information.
Finally, close the transaction connection of the database.

Syntax

The following method and functions delete the data using the key of the object store.

The create function to get key information with the id.

function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.delete(id);
query_variable.onsuccess = (event) => {
console.table(event);
};
txn_variable.oncomplete = function () {
db_variable.close();
};
};

The "onsuccess" event shows id data in the table format.

request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable, 30);
};

The "30" is the id of the indexedDB database to delete information.
If the id is unavailable, an error event occurs, and data is not deleted.

Examples

Example1

The example removes data using the key value of the object store using the javascript function. If the id of indexedDB is unavailable, then an error event and message show as an output.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> Deleted JavaScript IndexedDb Demo </h2>
<p id = "value1"></p>
<p id = "value2"></p>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// with auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readwrite');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.delete('id');
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo");
console.log(`The email of the ${id} id deleted successfully`);
} else {
document.getElementById("value1").innerHTML = "JavaScript IndexedDb Demo " +event ;
document.getElementById("value2").innerHTML = "The deleted data successfully of the " +id+ " id";
console.log(event);
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable, 2);
};
</script>
</html>

Output

The following output shows the success event of the deleted data in the database.

Example2

The example removes data using the key value of the object store using the javascript function. If the id of indexedDB is unavailable, then an error event and message show as an output.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> Delete JavaScript IndexedDb Demo </h2>
<p id ="value1"></p>
<p id ="value2"></p>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// with auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readwrite');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.delete('id');
query_variable.onsuccess = (event) => {
if (!event.target.result) {
document.getElementById("value1").innerHTML = "JavaScript IndexedDb Demo Error";
document.getElementById("value2").innerHTML = "The Name of the " +id+ " id does not found";
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${id} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.log(event);
console.log("data deleted successfully");
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable, 29);
};
</script>
</html>

Output

The following output shows an error to delete data in the database.

Example3

The example removes data using the key value of the object store using the javascript function. If the id of indexedDB is unavailable, then an error event and message show as an output.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> Deleted JavaScript IndexedDb Demo </h2>
<p id = "value1"></p>
<p id = "value2"></p>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// with auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function deleteNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readwrite');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.clear();
query_variable.onsuccess = (event) => {
if (!event.target.result) {
document.getElementById("value1").innerHTML = "JavaScript IndexedDb Demo " ;
document.getElementById("value2").innerHTML = "The deleted all data successfully";
} else {
console.log("JavaScript IndexedDb Demo Error");
console.log(event);
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable);
};
</script>
</html>

Output

The following output shows the success event of the delete all data in the database.