0

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

https://jsfiddle.net/4nLqy2ge/

4
  • "половина"? - скажите спасибо, что не все. Используйте this в обработчике клика.
    – user176262
    9 апр 2017 в 14:23
  • @Igor не работает this в обработчике клика
    – Imp3l
    9 апр 2017 в 14:57
  • я должен Вам верить на слово, как джентльмену?
    – user176262
    9 апр 2017 в 15:26
  • @Igor попробовал, не работает. Можете не верить
    – Imp3l
    9 апр 2017 в 15:36

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.