Задать вопрос
@LoranDeMarcus
javascript

Как исправить перебор в скрипте?

После ввода 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/
  • Вопрос задан
  • 250 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@dimentimor
А если при создании кнопки поместить в data-* атрибут какой-нибудь идентификатор. Например позицию элемента в массиве, и идентификатор элемента на странице.
Тогда по клику мы получим эти данные, и удалим по ним все, что нужно.
// <div data-task_elem="12">...</div>
// <button class="remove" data-task="12">...</button>
// ...
$('.remove').on('click', function (e) {
  var id = e.target.dataset.task; // 12
  delete arr[id];
  $('[data-task_elem="'+ id +'"]').remove();
});
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тг скрипт для рассылки
29 нояб. 2024, в 04:45
5000 руб./за проект
Авито, скрипт для массовой рассылки
29 нояб. 2024, в 04:42
5000 руб./за проект
Исправить ошибку чтения изображения OpenCV
29 нояб. 2024, в 03:50
1000 руб./за проект
Ещё заказы