Using the JavaScript IndexedDB API, it is possible to eliminate either individual or multiple entries within the database. By utilizing the key value or identifier, we can delete an entire row from the database seamlessly.
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 methods and functions outlined below facilitate the removal of data by utilizing the key from the object store.
- The creation function is designed to retrieve key information associated with the provided id.
- The "onsuccess" event displays the identification data in a tabular format.
- 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.
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();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
deleteNamesById(db_variable, 30);
};
Examples
Example1
The illustration demonstrates how to delete data by utilizing the key value of an object store through a JavaScript function. In the event that the indexedDB identifier is not present, an error event will be triggered, accompanied by a corresponding message displayed as 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 subsequent output illustrates the successful event regarding the data that has been removed from the database.
Example2
The provided example demonstrates how to delete data from an object store by utilizing the key value through a JavaScript function. In the event that the indexedDB ID is not found, an error event will be triggered, resulting in an output message that indicates the issue.
<!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 output displayed below indicates an error encountered while attempting to remove data from the database.
Example3
The following example demonstrates how to delete data from the object store by utilizing the key value through a JavaScript function. In the event that the id for indexedDB cannot be found, an error event will be triggered, accompanied by a corresponding message displayed as 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 subsequent output displays the successful event indicating that all data has been deleted from the database.
Conclusion
The capability to remove unnecessary data through its identifier is a crucial functionality for the database. The indexedDB database operates utilizing straightforward methods.