How to Delete specific item from local storage(java script)-CodePudding

When I press the Delete button, the local storage does not delete

As you can see below JavaSript code. I am trying the delete list from local storege. I think it was a problem deleteLocal(isbn) function. check line number(54,85)

JavaSript

class List {
  constructor(employee, address, phoneNumber, skils, salary) {
    this.employee = employee;
    this.address = address;
    this.phoneNumber = phoneNumber;
    this.skils = skils;
    this.salary = salary;
  }
}
class Display {
  ListAdded(list) {
    let BookList = document.getElementById("BookList");
    const creat = document.createElement("tr");
    creat.innerHTML = `<td>${list.employee}</td>
                       <td>${list.address}</td>
                       <td>${list.phoneNumber}</td>
                       <td>${list.skils}</td>
                       <td>${list.salary}</td>
                       <td><a href="#" >X</a></td>
                      `;
    BookList.appendChild(creat);
  }
  // delete function
  static deleteList(delet) {
    if (delet.classList.contains("delete")) {
      delet.parentElement.parentElement.remove();
    }
  }
}
// localStorege
class listStore {
  static getLocal() {
    let lists;
    if (localStorage.getItem("listStore") === null) {
      lists = [];
    } else {
      lists = JSON.parse(localStorage.getItem("listStore"));
    }
    return lists;
  }
  static displayList() {
    let lists = listStore.getLocal();
    lists.forEach(function (list) {
      let display = new Display();
      // Add list to Display
      display.ListAdded(list);
    });
  }
  static addLocal(list) {
    let lists = listStore.getLocal();
    lists.push(list);
    localStorage.setItem("listStore", JSON.stringify(lists));
  }

I think was this function was problem, i am trying but not happend

// localStorege delete function
  static deleteLocal(isbn) {
    let lists = listStore.getLocal();
    lists.forEach((list, index) => {
      if (list.isbn === isbn) {
        lists.splice(index, 1);
      }
    });
    localStorage.setItem("listStore", JSON.stringify(lists));
  }
}
document.addEventListener("DOMContentLoaded", listStore.displayList());
// submit list
let employform = document.getElementById("employForm");
employform.addEventListener("submit", function (e) {
  const employee = document.getElementById("Name").value;
  address = document.getElementById("address").value;
  phoneNumber = document.getElementById("phoneNumber").value;
  skils = document.getElementById("skils").value;
  salary = document.getElementById("Salary").value;
  let list = new List(employee, address, phoneNumber, skils, salary);
  console.log(list);
  let display = new Display();
  display.ListAdded(list);
  listStore.addLocal(list);
  e.preventDefault();
});
// delete list
document.getElementById("BookList").addEventListener("click", function (e) {
  Display.deleteList(e.target);

check also this

  listStore.deleteLocal(e.target.parentElement.previousElementSibling.textContent);
  e.preventDefault();
});*

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS  -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <title>my Projects</title>
  </head>

  <body>
    <nav
      class="navbar navbar-expand-lg navbar-dark bg-blue"
      style="background-color: #25d99ec9"
    >
      <a class="navbar-brand" href="#">Magic Notes</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            id="searchTxt"
            type="search"
            placeholder="search"
            aria-label="Search"
          />
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
            search
          </button>
        </form>
      </div>
    </nav>

    <div class="container" id="container">
      <h1>Dragon Travel desk</h1>
      <form id="employForm">
        <div class="form-group">
          <label for="name">Employe Name</label>
          <input
            type="text"
            class="form-control"
            id="Name"
            placeholder="Enter emloyee name"
          />
        </div>

        <div class="form-group">
          <label for="address">Address</label>
          <input
            type="text"
            class="form-control"
            id="address"
            placeholder="Enter employee address"
          />
        </div>
        <div class="form-group">
          <label for="phoneNumber">Phone Number</label>
          <input
            type="text"
            class="form-control"
            id="phoneNumber"
            placeholder="Enter employee phone number"
          />
        </div>
        <div class="form-group">
          <label for="skils">Skils</label>
          <input
            type="text"
            class="form-control"
            id="skils"
            placeholder="Enter employee skils"
          />
        </div>
        <div class="form-group">
          <label for="salary">Salary</label>
          <input
            type="text"
            class="form-control"
            id="Salary"
            placeholder="Enter employee salary"
          />
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <button type="submit" id="submit" class="btn btn-primary">
              Add Book
            </button>
          </div>
        </div>
      </form>
    </div>
    <hr />
    <div id="table">
      <div style="margin-left: 30vw">
        <h1>Travelars Forme</h1>
      </div>
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col" style="width: 16vw">Employee Name</th>
            <th scope="col" style="width: 16vw">Address</th>
            <th scope="col" style="width: 16vw">Phone Number</th>
            <th scope="col" style="width: 16vw">Skils</th>
            <th scope="col" style="width: 16vw">Salary</th>
          </tr>
        </thead>

        <tbody id="BookList"></tbody>
      </table>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM"
      crossorigin="anonymous"
    ></script>
    <script src="book.js"></script>
  </body>
</html>

Thanks

CodePudding user response：

use localStorage.removeItem("listStore") to remove item from local storage.

CodePudding user response：

I don't see any remarkable issue. You can try to add debugger before forEach and after forEach. The see is the lists array with desired items? Then see after the forEach debugger, has the array item been deleted. If not then instead of === try with ==.