Question

这里的JS新手，现在已经在这个问题上苦苦挣扎了几个小时。

因此，我创建了一个待办事项列表，其中包含一个按钮，用于将对象存储在localStorage中的数组中，还可以创建包含内容和删除按钮的动态列表项。每当我单击删除按钮时，它都会删除动态列表项，但不会从localStorage中删除它。我无法弄清楚如何将每个按钮分配给localStorage中的特定数组索引。

https://codepen.io/jupiterisland/pen/ooPXWV

＆＃13;

  var taskList = []; //build array

  if(localStorage.taskList){ //call func to recreate li's on refresh
    taskList = JSON.parse(localStorage.taskList) || [];
    createTasks(taskList)
  }

  function submitFunc() {
    var task = { //build objects
      desc: document.getElementsByTagName("textarea")[0].value,
      date: document.getElementsByTagName("input")[0].value,
      time: document.getElementsByTagName("input")[1].value,
      important: document.getElementsByTagName("input")[1].checked
    };

    if(task.desc && task.date !== ""){
      taskList[taskList.length] = task;  //put objects inside array
      localStorage.taskList = JSON.stringify(taskList); //store array with stringify
      newTaskList = JSON.parse(localStorage.taskList); //retrieve array with parse

      createTasks(newTaskList)

      document.getElementById("error").style.display = "none";
      return false; //prevent submit
    } else {
        document.getElementById("error").style.display = "block";
        document.getElementById("error").innerHTML = "Please enter a task description and a date.";
        return false;
    }
  }

  function createTasks (newTaskList){

    for (i = 0; i < newTaskList.length; i++) { // display objects in list items

      var currentTask = newTaskList[i];
      var taskIndex = newTaskList.indexOf(currentTask);
      newElement();

      function newElement() {
        var liNode = document.createElement("li");
        var titleNode = document.createElement("h3");
        var dNode = document.createElement("p");
        var tNode = document.createElement("p");
        var delNode = document.createElement("button")

        liNode.className = "liNode";
        titleNode.className = "titleNode";
        dNode.className = "dNode";
        tNode.className = "tNode";
        delNode.className = "delete";
        delNode.innerText = "Delete";

        var titleText = newTaskList[i].desc;
        var dateText = newTaskList[i].date;
        var timeText = newTaskList[i].time;

        var descNode = document.createTextNode(titleText);
        var dateNode = document.createTextNode(dateText);
        var timeNode = document.createTextNode(timeText);

        titleNode.appendChild(descNode);
        dNode.appendChild(dateNode);
        tNode.appendChild(timeNode);
        liNode.appendChild(titleNode);
        liNode.appendChild(dNode);
        liNode.appendChild(tNode);
        liNode.appendChild(delNode);

        document.getElementById("taskBoard").appendChild(liNode);

        if (taskBoard.childElementCount > newTaskList.length) { //remove excess divs
          for (n = 0; taskBoard.childElementCount - 2; n++) {
            taskBoard.removeChild(taskBoard.firstChild);
          }
        }

          function deleteTasks(){
            var listItem = this.parentNode;
            var ul = listItem.parentNode;
            ul.removeChild(listItem);
          }
        delNode.addEventListener("click", deleteTasks);
      }
    }
  }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <h1>My Task Board</h1>
     <div class="container">
     <form onsubmit="return submitFunc()">
     <div>
       <label for="">Task:</label>
       <textarea name="name" rows="8" cols="80"placeholder="Please enter your task description"></textarea>
      </div>
      <div>
       <label for="">Deadline:</label>
       <input type="date" placeholder="Choose a date">
       <input type="time" placeholder="Set time">
      </div>
      <div>
       <label for="">Important:</label>
       <input type="checkbox" name="" value="">
       </div>
       <button type="submit" name="button">Add Task</button>
       <div id="error"></div>
     </form>
     </div>
 
     <div>
      <ul id="taskBoard"></ul>
     </div>
</body>
</html>

＆＃13;

如何使用动态按钮从localStorage中删除数组对象？ [仅限JS]

0 个答案: