予定リストの作成

Question

予定リストを作成していますが、1つの問題が発生しています。ユーザーがアイテムを追加できるように、ToDoリストを設定しました。ただし、アイテムを削除するリンクをクリックすると問題が発生します。

xをクリックしてアイテムを削除すると、そのアイテムは削除されず、その前にアイテムが削除されます。何らかの理由で、remove関数は、クリックする前にアイテムの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>

はそれが私のToDoリストの取り消し線要素に関連しているので、私は最初はclickHandlerが含まれていなかったことに注意してください。また、todoアイテムが配列に格納され、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; 
}