I have added a delete Function , It is deleteing the row successfully but i want to delete from localstorage tooo in JavaScript And Whenever user reload the page so it could be delete from localstorage alo so the book will be not appear And i want to delete it from localstorage when function clicked, thats it
class Display {
add(book) {
console.log('Adding to UI');
let tableBody = document.getElementById('tableBody')
let uiString = `<tr class="tableBody" id="tableBody">
<td id="search">${book.name}</td>
<td>${book.author}</td>
<td>${book.type}</td>
<td><input type="button" value="Delete Row" class="btn btn-outline-danger" onclick="RemoveRow()"></td>
</tr>`;
tableBody.innerHTML += uiString;
// save the data to the browser's local storage -----
const books = JSON.parse(localStorage.getItem("books"));
// console.log(books);
if (!books.some((oldBook) => oldBook.id === book.id)) books.push(book);
localStorage.setItem("books", JSON.stringify(books));
}
function RemoveRow(uid) {
// event.target will be the input element.
let td1 = event.target.parentNode;
let tr1 = td1.parentNode;
tr1.parentNode.removeChild(tr1);// the row to be removed
window.localStorage.setItem("books", JSON.stringify(books));
}
$('tableBody').on('click', 'input[type="button"]', function(e){
$(this).closest('tr').remove()
})
<div id="table">
<h1>Your Books</h1>
<table class="table table-dark table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Author</th>
<th scope="col">Type</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody class="tableBody" id="tableBody"> </tbody>
</table>
</div>
</div>
In my view, I guess when you filter books based on id and then set them again to the local storage, it will solve your problem.
const newBooks= books.filter(book=> book.id !== idThatYouNeedToDelete)
localStorage.setItem("books", JSON.stringify(newBooks));