創建待辦事項列表

Question

我正在創建待辦事項列表，但我遇到了一個問題。我已成功設置待辦事項列表，以便用戶可以添加項目。但是，單擊鏈接以刪除該項目時，問題就會發揮作用。

當您點擊x刪除該項目時，它不會刪除該項目，而是刪除該項目之前的項目。出於某種原因，刪除功能似乎總是在您點擊該項目之前捕獲該項目的ID。

相關JS：

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>

請注意，我並沒有包括第一clickHandler事件，因爲這關係到我的待辦事項列表中刪除線元素。還值得注意的是，待辦事項存儲在一個數組中，我正在使用localStorage。

感謝您的幫助！

編輯： 這裏的附加功能是否有幫助（它位於上方的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的代碼，以簡化事情（你可以在你的末端重新實現）。我已經刪除了上面描述中沒有包括的任何對函數的引用。

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