创建待办事项列表

Question

我正在创建一个待办事项清单，但我遇到了一个问题。我已经成功地设置了待办事项列表，以便用户可以添加项。但是，当单击链接以删除该项时，问题就会发生。

当您单击x以删除项目时，它不会删除该项，而是删除项目之前的项。出于某种原因，remove函数似乎总是在单击项目之前捕获项目的id。

相关的联合来文：

​

function listTodos() {
    var items = storeTodos();

    var html = '<ul>';
    for (i = 0; i < items.length; i++){
      html += '<li><span class="todoItem">' + items[i] + '</span><a href="#" class="deleteItems"> x</a>' + '</li>';
    };
    html += '</ul>';

    document.getElementById('items').innerHTML = html;
    var todoItem = document.getElementsByClassName('todoItem');

    // loop through all items in the array and add the event listener
    for (i = 0; i < todoItem.length; i++) {
      var clicked = false;
      todoItem[i].addEventListener('click', clickhandler);
      // Set id to uniquely identify each todo item
      todoItem[i].id = 'todoItem-' + i;
      id = todoItem[i].id;
    }
  
    // Function to remove todo items if "x" is clicked
      var deleteItems = document.getElementsByClassName('deleteItems');
      for (i = 0; i < deleteItems.length; i++) {
        deleteItems[i].addEventListener('click', remove);
      };
}

function remove(deleteItems) {
  var clicked = true;
  if (clicked) {
    console.log(id);
    var todos = storeTodos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));
    listTodos();
    return false;
  }
}

  <div id="wrapper">
      <form id="createList">
        <input id="entry"><button id="add">Add a Task</button>
      </form>

      <div id="items"></div>
    </div>
    <script src="js/todo.js"></script>

​

请注意，我没有包括第一个点击处理程序，因为这与我的待办事项列表中的删除元素有关。还值得注意的是，todo项存储在一个数组中，我正在使用localStorage。

谢谢你的帮助！

编辑:这是add函数，如果有帮助的话(它位于listTodos函数的上方)：

​

document.getElementById('add').addEventListener('click', add);

function add() {
  var task = document.getElementById('entry').value;
    if(task != ''){
      var items = storeTodos();
      items.push(task);
      localStorage.setItem('todo', JSON.stringify(items));

      listTodos();
      document.getElementById('createList').reset();
      return false;
    }

    return false;
}

​

Answer 1

这里有一种方法：https://jsfiddle.net/hxgn6bd4/

请注意，我已经删除了所有的localStorage代码，以简化事情(您可以在您的端重新实现这一点)。我已经删除了对函数的任何引用，您在上面的描述中并没有包括这些引用。

<input id="entry"><button id="add">Add a Task</button>
<div id="items"></div>

JavaScript

var items = [];

function listTodos() {
    var html = '<ul>';
    for (i = 0; i < items.length; i++){
      html += '<li><span class="todoItem">' + items[i] + '</span><a href="#" class="deleteItem"> x</a>' + '</li>';
    };
    html += '</ul>';

    document.getElementById('items').innerHTML = html;
    var todoItem = document.getElementsByClassName('todoItem');

    // loop through all items in the array and add the event listener
    for (i = 0; i < todoItem.length; i++) {
      // Set id to uniquely identify each todo item
      todoItem[i].id = 'todoItem-' + i;
      id = todoItem[i].id;
    }

    // Function to remove todo items if "x" is clicked
      var deleteItems = document.getElementsByClassName('deleteItem');
      for (i = 0; i < deleteItems.length; i++) {
        deleteItems[i].id = i;
        deleteItems[i].addEventListener('click', remove);
      };
}

function remove(event) {
    items.splice(event.target.id, 1);
    listTodos();
    return false;
}

document.getElementById('add').addEventListener('click', add);

function add() {
  var task = document.getElementById('entry').value;
    if(task != ''){
      items.push(task);
      listTodos();
      return false;
    }

    return false;
}