Question

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

当您单击x以删除该项目时，它不会删除该项目，而是删除该项目之前的项目。出于某种原因，删除功能似乎始终在您单击的项目之前捕获项目的ID。

相关的JS：

＆＃13;

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;
  }
}

＆＃13;

  <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>

＆＃13;

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

感谢您的帮助！

编辑：这有添加功能，如果有帮助（它位于listTodos函数上方）：

＆＃13;

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;
}

＆＃13;

Answer 1

以下是这样做的一种方式：https://jsfiddle.net/hxgn6bd4/

请注意，我已删除所有localStorage代码，以简化操作（您可以在最后重新实现此功能）。并且我已删除了对您未在上述说明中包含的功能的任何引用。

<强> HTML

<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;
}

创建待办事项列表

1 个答案: