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")]; => {
  button.addEventListener("click", async (e) => {
     const idValue =

     try {
        const res = await axios.delete(`/api/books/${Number(idValue)}`);

        const data = => === Number(idValue));

        if (!data) {
           console.log(`No book with such${idValue}`);
        const filteredBook = books.filter((book) => {
           if ( !== Number(idValue)) {
              const { title, author, image, desc, id } = book;
              return `
              <div class="card flex" style="width: 18rem; min-height:24rem;">
                    class="card-img-top w-50 rounded mx-auto d-block"
                  <div class="card-body">
                 <h4 class="card-title">${title}</h4>
                 <h6>Written by: <span class="text-primary">${author}</span></h6>
               <p class="card-text"> ${desc}</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
           class="btn btn-danger del-btn"
        card.innerHTML = filteredBook;
     } catch (error) {

My server.js file:

app.delete("/api/books/:id", (req, res) => {
const { id } = req.params;

const book = books.find((book) => === Number(id));

 if (!book) {
   return res
     .json({ success: false, msg: `No book with the id of ${id}` });

 const newBook = books.filter((book) => !== Number(id));
 return res.status(200).json({ success: true, data: newBook });

app.listen(PORT, () => {
console.log("Server is running on port 5000...");


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 = => === Number(idValue));

needs to be changed to:

const data = => === Number(idValue)); 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, from axios gets you this { success: true, data: newBook } so to get the newBook data, you need

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 or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x