How can you delete an item in localStorage when clicking a remove button

Question

I'm trying to build a project in which when the user clicks a remove button, a specific item gets deleted. But whenever I try to make it, nothing happens and the item doesn't get deleted.

I want this to be made in the removeBooks() function but I can't make it work. For now, I've tried looping through the values of the current localStorage and splice the index which would be the specific item.

Then, I would set the localStorage item to the new one with the items deleted. All these need to happen when the delete button has been clicked on, but this is not working as the button does nothing. No error gets logged in the console either.

If anyone could help me understand where I've gone wrong in this logic and help me figure out a way to do it I would really appreciate it.

let myLibrary = JSON.parse(localStorage.getItem('books')) || [];
// We push the values to our array and printed. If there is nothing, we print an empty array, otherwise we get our localStorge data.

const addBook = (event) => {
  // We create the fields so that we can fill our array.
  var fields = {
    title: document.getElementById("title").value,
    author: document.getElementById("author").value,
    pages: document.getElementById("pages").value,
    checkbox: document.getElementById("checkbox").checked
  };


  myLibrary.push(fields)

  renderBooks()

}


function renderBooks() {

  localStorage.setItem('books', JSON.stringify(myLibrary))
  const data = JSON.parse(localStorage.getItem('books'))

  //We map through the array and print the necessary data to our HTML so that the client can see it.

  document.getElementById('bookList').innerHTML = data.map(item => {
    return `<div>
        <div>Title: ${item.title}</div>
        <div>Author: ${item.author}</div>
        <div>Pages: ${item.pages}</div>
        <div>${item.checkbox === true ? "Read" : "Not Read"}</div>
        <button onclick="removeBooks()">Remove</button>
      </div>`


  }).join('')

  // If there is no form, we want to display it, otherwise we just don't have the form displayed.
  var x = document.getElementById("demo");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

}

// Here I want to make the remove function but not with much luck.
function removeBooks() {
  const data = JSON.parse(localStorage.getItem('books'))
  for (var index = 0; index < data.length; index++) {
    data.splice(index, 1);
  }
  localStorage.setItem('books', JSON.stringify(myLibrary))
}
console.log(myLibrary)

renderBooks()

Here is the HTML code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src=
"https://code.jquery.com/jquery-3.6.0.js">
 </script>

  </head>
  <body>
    <button onclick="renderBooks()">New Book</button>

  <br><br>
  <div id="demo">
    <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);">
      <tr>
        <td>
           <label for="title">Title</label>
          <input name="title" id="title"/>
          <a href="#" class="close-classic"></a>
        </td>
      </tr>
      <tr>
        <td>
          <label for="title">Author</label>
          <input name="author" id="author"/>
          <a href="#" class="close-classic"></a>
        </td>
      </tr>
      <tr>
        <td>
          <label for="title">Pages</label>
          <input name="pages" id="pages"/>
            <label for="title">Read</label>
           <input type="checkbox" name="checkbox" id="checkbox" />
          <a href="#" class="close-classic"></a>
          <button onclick="addBook(event)">Submit</button>
          <button onclick="renderBooks()">close</button>
        </td>
      </tr>
    </table>
  </div>
<div id="bookList"></div>
  <script src="../JS/script.js"></script>
  </body>
</html>

Have you tried to use your debugger? Add a breakpoint in `removeBooks`, press the button and step through the function. — , Jun 01 '21 at 08:50
You're removing the book from `data` but you're writing `myLibrary` to local storage. That's a typo. `myLibrary` should be `data` or vice versa. It's completely unclear for why you even have two different variables for the same data. You should remove either `data` or `myLibrary` from your code and stick with the other. — , Jun 01 '21 at 08:57

score 1 · Answer 1 · answered Jun 01 '21 at 08:51

1

You should pass the index of the item to the method and loop over the localStorage delete that particular data and again set the data in localStorage.

Take a look at Delete a row in JavaScript.

answered Jun 01 '21 at 08:51

Anglesvar

1,132
8
15

score -1 · Answer 2 · answered Jun 01 '21 at 08:48

-1

This may be what you are looking for
localStorage.removeItem('books')

answered Jun 01 '21 at 08:48

Aspect

150
11

1

I think the question is for deleting a node(index). – Anglesvar Jun 01 '21 at 08:48

How can you delete an item in localStorage when clicking a remove button

2 Answers2