He agregado una función de eliminación, está eliminando la fila con éxito, pero también quiero eliminarla del almacenamiento local en JavaScript y cada vez que el usuario vuelve a cargar la página para que también se pueda eliminar del almacenamiento local, el libro no aparecerá y quiero eliminarlo desde el almacenamiento local cuando se hace clic en la función, eso es todo
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>En mi opinión, supongo que cuando filtra los libros según la identificación y luego los configura nuevamente en el almacenamiento local, resolverá su problema.
const newBooks= books.filter(book=> book.id !== idThatYouNeedToDelete)localStorage.setItem("libros", JSON.stringify(nuevosLibros));