1

我用本地存储创建了一个待办事项列表。如果您创建三个列表项并删除第二个，则删除的列表项将在刷新时重新出现在第三项的位置。

编辑：我不确定它是否与本地存储或原始 todo 数组有关。在下面的代码中，我试图从数组中删除相关值，但我怀疑这不起作用（将数组记录到控制台不会产生任何结果）。

虽然它与本地存储无关，但我认为问题在于以下代码：

function removeItem() {
  let item = this.parentNode.parentNode;
  let parent = item.parentNode;
  let id = parent.id;
  console.log(id)
  let value = parent.textContent;
     todo.splice(todo.indexOf(value, 1));
  this.parentNode.parentNode.removeChild(this.parentNode);    
  saveTodos();
}

编辑：这是我用来存储列表项的代码：

function saveTodos() {
  let jsonstr = JSON.stringify(todo);
  localStorage.setItem('todo', jsonstr);
}

    function getTodos() {
      localStorage.getItem('todo')
      let jsonstr = localStorage.getItem("todo");
      todo = JSON.parse(jsonstr);
      if (!todo || !todo.length) {
        todo = [];
      }
      else {
        renderTodoList();

} }

这是 codepen 的链接：https ://codepen.io/david-webb/pen/yLeqydK

你能帮我吗？

4

3 回答 3

2

这是因为当前代码似乎删除了错误的项目。

看场景：

Localstorage: ["t","1", "2"];

-> 删除项目 #2 ("t")

Localstorage: ["t", "1"];

输出：

在此处输入图像描述

如您所见，输出显示["t", "2"]认为 localstorage 数组是["t", "1"].

这是因为removeItem函数中的逻辑有缺陷。

试试这个，而不是。

//remove list item on click
function removeItem() {
  const item = this.parentNode;
  const value = this.parentNode.lastChild.textContent;
  
  todo = todo.filter(t => t !== value);
  this.parentNode.parentNode.removeChild(item);   
  saveTodos();
}

小提琴：

<input type = "text" style="font-size:25px;" id = "input" placeholder="Write here">

<button id = "addBtn" >Add item</button>

<ul id = "myUL">
</ul>

<script>
let todo = [];

renderTodoList();

document.getElementById('addBtn').addEventListener('click', function () {
  let value = document.getElementById('input').value;
  if (value) {
    todo.push(value);
    saveTodos()
    addInput(value);
  }
});

input.addEventListener("keypress", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
  // Trigger the button element with a click
  document.getElementById("addBtn").click();
}
});


function addInput(text) {
  //add list item on click
  let listItem = document.createElement('li');
  let list = document.getElementById('myUL');
  let input = document.getElementById('input').value;
  let textNode = document.createTextNode(text);

  //create and append remove button
  let removeBtn = document.createElement("BUTTON");
  list.appendChild(removeBtn);
  removeBtn.className = "removeBtn";
  removeBtn.innerHTML = "Remove item";
  listItem.appendChild(removeBtn);
  list.appendChild(listItem);
  listItem.appendChild(textNode);
  document.getElementById("input").value = "";
  removeBtn.addEventListener('click', removeItem);
  console.log(todo);
}

//remove list item on click
function removeItem() {
  const item = this.parentNode;
  const value = this.parentNode.lastChild.textContent;
  
  todo = todo.filter(t => t !== value);
  this.parentNode.parentNode.removeChild(item);   
  saveTodos();
}

function renderTodoList() {
  if (!todo) return
  for (let i = 0; i < todo.length; i++) {
    let value = todo[i];
    addInput(value);
    console.log(value);
  }
}

function saveTodos() {
  let jsonstr = JSON.stringify(todo);
  localStorage.setItem('todo', jsonstr);
}

function getTodos() {
  localStorage.getItem('todo')
  let jsonstr = localStorage.getItem("todo");
  todo = JSON.parse(jsonstr);
  if (!todo || !todo.length) {
    todo = [];
  }
  else {
    renderTodoList();
  }
}



//cross out text on click
/*document.addEventListener('click', function (ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');

  }
});*/

//renderTodoList();
getTodos();
</script>

于 2020-09-25T10:01:57.510 回答
0

我认为问题在于spliceand的使用indexOf。

for splice-- 通过索引，怎么可能删除，新建项

var todo = ["a", "b", "c"];
var value = "b"

// your code
todo.splice(todo.indexOf(value, 1));
console.log(todo)


var todo = ["a", "b", "c"];
var value = "b"
// correct way to delete
todo.splice(todo.indexOf(value), 1);

console.log(todo)

于 2020-09-25T10:13:15.833 回答
-1

此行有错误todo.splice(todo.indexOf(value, 1));

原因是当您let item = this.parentNode.parentNode;在变量中应用 UL 元素时。

使固定：

在addInput()创建跨度中添加项目并将文本放在跨度内而不是创建文本节点时。

从待办事项中删除时，您应该在 SPAN 标记中使用 innerText todo.splice(todo.indexOf(value, 1));

在value变量中，您应该有待办事项的名称。

于 2020-09-25T10:04:45.800 回答