Создание списка дел

Question

Я создаю список дел, но я столкнулся с одной проблемой. Я успешно настроил список дел, чтобы пользователь мог добавлять элементы. Однако проблема возникает при нажатии ссылки для удаления элемента.

Когда вы нажимаете на x, чтобы удалить элемент, он не удаляет этот элемент, но вместо этого удаляет элемент перед ним. По какой-то причине функция удаления, по-видимому, всегда захватывает идентификатор элемента до того, на который вы нажимаете.

Соответствующие 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 так, что связано с перечеркнутым элементом моего списка задач. Также стоит отметить, что элементы todo хранятся в массиве, и я использую localStorage.

Спасибо за помощь!

Edit: Вот функция дополнения, если это помогает (он находится выше функции 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; 
}