title: Wrong Items Being Deleted in Local Storage
body: <p>I am trying to use local storage to store books for a Library app. I am trying to implement the delete functionality but I am running into issues. When I click the button in the UI to delete an entry, it deletes random books from local storage and not the single book I want to delete. In the UI the correct book is deleted but in local storage it is not behaving like I expected it to. I would appreciate any help I can get. Below is my code:</p>
  <pre><code>// Book Class
  class Book {
      constructor(title, author, pages, bookRead) {
          this.title = title;
          this.author = author; 
          this.pages = pages;
          this.bookRead = bookRead;
      }
  }
  
  //Library Class
  class Library {
      static showBook = () =&gt; {
          const bookList = UserStorage.getBooks();
  
          bookList.forEach((book) =&gt; Library.addBook(book))
      }
      static addBook = (book) =&gt; {
          const displayArea = document.querySelector('.displayArea');
          let newBook = document.createElement('div');
          newBook.classList.add('newEntry');
  
          let newTitle = document.createElement('div')
          newTitle.classList.add('newTitle', 'cardItem');
          newBook.appendChild(newTitle);
          newTitle.textContent = `Title: ${book.title}`
  
          let newAuthor = document.createElement('div')
          newAuthor.classList.add('newAuthor', 'cardItem');
          newBook.appendChild(newAuthor);
          newAuthor.textContent = `Author: ${book.author}`
          
          let newPages = document.createElement('div')
          newPages.classList.add('newPages', 'cardItem');
          newPages.textContent = `Pages: ${book.pages}`
          newBook.appendChild(newPages);
  
          const bookRead = document.querySelector('.hasRead').checked;
          let readSection = document.createElement('button')
          readSection.classList.add('readToggle')
          if(bookRead == true){
              readSection.textContent = 'Read';
          } else {
              readSection.textContent = 'Not Read';
          }
          newBook.appendChild(readSection);
  
          const deleteBtn = document.createElement('button');
          deleteBtn.classList.add('deleteBtn');
          deleteBtn.textContent = 'X';
          newBook.appendChild(deleteBtn);
  
          displayArea.appendChild(newBook); 
      }
      static clearInput = () =&gt; {
          document.querySelector('.title').value = '';
          document.querySelector('.author').value = '';
          document.querySelector('.pages').value = '';
          document.querySelector('.hasRead').value = '';
      }
  
      static deleteBook = (item) =&gt; {
          if(item.classList.contains('deleteBtn')) {
              item.parentElement.remove() 
          }
      }
      static toggleBookRead = (button) =&gt; {
          if(button.classList.contains('readToggle')) {
              if(button.textContent === 'Read') {
                  button.textContent = 'Not Read'
              } else if (button.textContent === 'Not Read') {
                  button.textContent = 'Read'
              }
          }
      }
  }
  
  // Local Storage Class
  class UserStorage {
      static getBooks = () =&gt; {
          let booksInStorage;
  
          if(localStorage.getItem('booksInStorage') === null) {
              booksInStorage = [];
          } else {
              booksInStorage = JSON.parse(localStorage.getItem('booksInStorage'));
          }
          return booksInStorage;
      }
      static addBook = (book) =&gt; {
          const currentBookList = UserStorage.getBooks();
          currentBookList.push(book);
          localStorage.setItem('booksInStorage', JSON.stringify(currentBookList));
      }
      static removeBook = (title) =&gt; {
          const currentBookList = UserStorage.getBooks();
          currentBookList.forEach((book, index) =&gt; {
              if(title === title) {
                  currentBookList.splice(index, 1);
              }
          })
          localStorage.setItem('booksInStorage', JSON.stringify(currentBookList));
      }
  }
  
  // Display book in library
  document.addEventListener('DOMContentLoaded', Library.showBook)
  
  // Toggle Add Button
  const addButton = document.querySelector('.addBtn');
  addButton.addEventListener('click', () =&gt; {
      addButton.style.display = 'none';
      document.querySelector('.addBook').style.display = 'block';
  })
  
  // Close Form Button
  const closeBtn = document.querySelector('.closeBtn');
  closeBtn.addEventListener('click', () =&gt; {
      document.querySelector('.addBook').style.display = 'none';
      addButton.style.display = 'block';
  })
  
  // Add book
  document.querySelector('.submitBook').addEventListener('click', (e) =&gt; {
      e.preventDefault();
      const title = document.querySelector('[data-title]').value;
      const author = document.querySelector('[data-author]').value;
      const pages = document.querySelector('[data-pages]').value;
      const bookRead = document.querySelector('.hasRead').checked;
  
      const book = new Book(title, author, pages, bookRead)
  
      // Add Book to UI
      Library.addBook(book)
  
      // Add Book to Local Storage
      UserStorage.addBook(book); 
  
      // Clear Input Fields
      Library.clearInput();
  })
  
  
  // Delete Book
  document.querySelector('.displayArea').addEventListener('click', (e) =&gt; {
      e.preventDefault();
      Library.deleteBook(e.target);
      console.log(e.target.parentElement.firstChild)
      UserStorage.removeBook(`${e.target.parentElement.textContent}`)
  })
  
  // Mark book as Read/Not Read
  document.querySelector('.displayArea').addEventListener('click', (e) =&gt; {
      e.preventDefault();
      Library.toggleBookRead(e.target);
  })
  </code></pre>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Library App&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;img class=&quot;leftImg&quot; src=&quot;Images/pile_of_books.png&quot; alt=&quot;Image of Books&quot;&gt;&lt;h1 class=&quot;mainTitle&quot;&gt;My Library&lt;/h1&gt;&lt;img class=&quot;rightImg&quot; src=&quot;Images/pile_of_books.png&quot; alt=&quot;Image of Books&quot;&gt;
      &lt;/header&gt;
      &lt;main&gt;
          &lt;section&gt;
              &lt;div class=&quot;mainContent&quot;&gt;
                  &lt;h2 class=&quot;libraryTitle&quot;&gt;Would you like to add a book to your library?&lt;/h2&gt;
                  &lt;button class=&quot;addBtn&quot;&gt;Add&lt;/button&gt;
                  &lt;div class=&quot;addBook&quot;&gt;
                      &lt;form class=&quot;newBookForm&quot;&gt;
                          &lt;button class=&quot;closeBtn&quot;&gt;X&lt;/button&gt;
                          &lt;input data-title class=&quot;title&quot; type=&quot;text&quot; placeholder=&quot;Title&quot;&gt;
                          &lt;input data-author class=&quot;author&quot; type=&quot;text&quot; placeholder=&quot;Author&quot;&gt;
                          &lt;input  data-pages class=&quot;pages&quot; type=&quot;number&quot; placeholder=&quot;Pages&quot;&gt;
                          &lt;label class=&quot;readSection&quot; for=&quot;hasRead&quot;&gt;
                              &lt;label class=&quot;readTitle&quot;&gt;Have you read this book?&lt;/label&gt;
                              &lt;input class=&quot;hasRead&quot; type=&quot;checkbox&quot;&gt;
                          &lt;/label&gt;
                          &lt;button class=&quot;submitBook&quot;&gt;Submit book?&lt;/button&gt; 
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;displayArea&quot;&gt;
      
              &lt;/div&gt;
          &lt;/section&gt;
          
      &lt;/main&gt;
      &lt;footer&gt;
  
      &lt;/footer&gt;
      
  &lt;/body&gt;
  &lt;script src=&quot;script.js&quot; defer&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>