Estoy tratando de construir un directorio de libros usando vainilla javascript y axios . Lo que quiero es que cada vez que presione el botón eliminar, el libro se elimine de la lista. Pero cada vez que presiono el botón me muestra un error. No sé dónde está el problema.

Mi archivo app.js :

 const delBtn = [...document.querySelectorAll(".del-btn")]; delBtn.map((button) => { button.addEventListener("click", async (e) => { e.preventDefault(); const idValue = e.currentTarget.parentElement.firstElementChild.nextElementSibling .nextElementSibling.innerHTML; try { const res = await axios.delete(`/api/books/${Number(idValue)}`); const data = res.data.find((book) => book.id === Number(idValue)); if (!data) { console.log(`No book with such${idValue}`); } const filteredBook = books.filter((book) => { if (book.id !== Number(idValue)) { const { title, author, image, desc, id } = book; return ` <div class="card flex" style="width: 18rem; min-height:24rem;"> <img src=${image} class="card-img-top w-50 rounded mx-auto d-block" alt="#" /> <div class="card-body"> <h4 class="card-title">${title}</h4> <h6>Written by: <span class="text-primary">${author}</span></h6> <p>${id}</p> <p class="card-text"> ${desc}</p> <a href="#" class="btn btn-primary">Go somewhere</a> <a class="btn btn-danger del-btn" type="submit" ">Delete</a> </div> </div> `; } }); card.innerHTML = filteredBook; } catch (error) { console.log("Error"); } });

Mi archivo server.js :

 app.delete("/api/books/:id", (req, res) => { const { id } = req.params; const book = books.find((book) => book.id === Number(id)); if (!book) { return res .status(400) .json({ success: false, msg: `No book with the id of ${id}` }); } const newBook = books.filter((book) => book.id !== Number(id)); return res.status(200).json({ success: true, data: newBook }); }); app.listen(PORT, () => { console.log("Server is running on port 5000..."); });