Делаю todo-list, и возникла проблема в удалении выделенных галочкой элементов, checked на каждом отрабатывает верно, но удаляются элементы не все, иногда верно удаляются, иногда если выделено два элемента один может остаться и т.д. пример в картинках
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo-List</title>
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<div class="container">
<section class="todo__logo">To Do List</section>
<section class="addform">
<div class="addform__title title">Add Task...</div>
<input class="addform__input" placeholder="Enter the task here..." type="text">
<button class="addform__button">Add +</button>
</section>
<section class="todo-list">
<h1 class="todo-list__title title">Tasks</h1>
<ul class="todo-list__items">
<li class="todo-list__item">
<label>
<input class="checkbox__input" type="checkbox">
<span class="checkbox"></span>
</label>
<p>Cook</p>
</li>
</ul>
<button class="todo-list__btn delete-all-btn">Delete all</button>
<button class="todo-list__btn delete-selected-btn">Delete selected</button>
<button class="todo-list__btn important-tasks ">Important tasks</button>
</section>
</div>
<script src="js/main.min.js"></script>
</body>
</html>
const addBtn = document.querySelector('.addform__button')
const todo = document.querySelector('.todo-list__items')
const btnDelAll = document.querySelector('.delete-all-btn')
const btnDelSel = document.querySelector('.delete-selected-btn')
let btnDelItems = document.querySelectorAll('.todo-list__delete-btn')
let input = document.querySelector('.addform__input')
let listNotChecked
let itemCheckBoxes
let toDoTask
let toDoList = []
let uncheckedList = []
function addTask () {
let newToDo = {
inputValue: input.value,
checked: false,
important: false,
}
if (input.value.trim() !== '') {
toDoList.push(newToDo)
todo.innerHTML = ''
displayTasks()
} else {
alert ('Enter the task please!...')
}
}
function displayTasks(){
toDoList.forEach(function(item, i) {
todo.innerHTML += `<li class="todo-list__item">
<label>
<input id="item_${i}" class="checkbox__input" type="checkbox">
<span class="checkbox"></span>
</label>
<p>${item.inputValue}</p>
</li>`
})
}
function deleteAllTasks() {
toDoList = []
todo.innerHTML = ''
}
function deleteSelected() {
toDoList.forEach(function(item, i){
if (document.querySelector(`#item_${i}`).checked) {
toDoList.splice(i, 1)
}
})
console.log(toDoList)
todo.innerHTML = ''
displayTasks()
}
addBtn.addEventListener('click', addTask)
btnDelAll.addEventListener('click', deleteAllTasks)
btnDelSel.addEventListener('click', deleteSelected)
Простой