После ввода N количества элементов, они добавляются в DOM-дерево и в массив. При нажатии на крестик справа у элемента, должен удалятся именно этот элемент, но вместо этого удаляется половина всех элементов. Что надо сделать, чтобы удалялся только нужный элемент из списка и из массива.
<body>
<section id="todo_app">
<header>
<input id="new-todo" autofocus>
</header>
<section id="main" style="display: none;">
<input id="toggle-all" type="checkbox"> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<!-- li class="completed">
<div class="task">
<label> <input class="toggle" type="checkbox"> </label>
<button class="destroy"></button>
</div>
</li -->
</ul>
</section>
<footer id="footer" style="display: none;">
<span class="todo-count">
<strong class="count"> </strong> items left
</span>
<ul id="filters">
<li>
<a href="#" class="show-all-tasks">All</a>
</li>
<li>
<a href="#" class="show-active-tasks">Active</a>
</li>
<li>
<a href="#" class="show-completed-tasks">Completed</a>
</li>
</ul>
<button id="clear-completed" style="display: none;">Clear completed</button>
</footer>
</section>
<footer>
</footer>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/application.js"></script>
</body>
var tasks = [];
var i = 0;
function updateTasks() {
$('#todo-list').find('li').remove();
$(tasks).each(function(i) {
$('#todo-list').append('<li class="completed">\
<div class="todo-task">\
<label class="text"><input class="toggle" type="checkbox">'+ tasks[i].title +'</label>\
<button class="destroy"></button>\
</div>\
</li>');
});
tasksCount();
}
/* Подсчет количества элементов */
function tasksCount() {
$('.count').text(tasks.length);
if (tasks.length < 1) {
$('#footer').hide();
}
}
/* Добавление задач */
$('#new-todo').keyup(function (event) {
if ((event.keyCode == 13)) {
if ($(this).val() !== '') {
$('#main').show();
$('#footer').show();
var $this = $(this);
var newTask = $this.val();
tasks.push({id: i++, title: newTask, status: 'active'});
updateTasks();
// Очистка Input
$('#new-todo').val('');
} else {
return false;
}
}
});
/* Удаление */
$('#todo-list').on('click', 'button.destroy', function () {
$.each(tasks, function (id) {
tasks.splice(id, 1);
});
updateTasks();
tasksCount();
});
https://jsfiddle.net/4nLqy2ge/ 