How to delete an item from a list using vanilla JavaScript?

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It looks like this:

const data = res.data.find((book) => book.id === Number(idValue));

needs to be changed to:

const data = res.data.data.find((book) => book.id === Number(idValue));

res.data is the axios response data and then you have a data element in your response that you need to get. Your response is this:

return res.status(200).json({ success: true, data: newBook });

so, res.data from axios gets you this { success: true, data: newBook } so to get the newBook data, you need res.data.data.

FYI, all of this is basic debugging. You log your exact error, follow the hints it gives you, then log other intermediate values to see where things went wrong and usually you can then see where the error is.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0