I am trying to build a book directory using vanilla javascript and axios. What I want is that every time I press the delete button the book will be deleted from the list. But every time I press the button it shows an error. I don't know where is the problem.

My app.js file:

 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");
     }
  });

My server.js file:

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...");
});