Неправильно удаляются элементы

206

11 апреля 2017, 10:29

После ввода 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>
</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();
});