Возможно это связано с тем, что после удаления первого элемента бывший второй становится первым
С этим и связано. Если нужно в одном цикле удалить по несколько элементов из массива, перебирать нужно с конца, т.к. индексы обновляются после удаления каждого элемента:
let arr = [0, 1, 2, 3, 4, 5];
arr.forEach( (item, i) => arr.splice(i, 1) ); // Хотелось удалить все 6 элементов
console.log( arr );
/*
Первый удалили, → [1, 2, 3, 4, 5]
Второй удалили, → [1, 3, 4, 5]
Третий удалили, → [1, 3, 5]
Четвертого уже нет!)
*/
В вашем случае, если очень хочется через forEach (он не умеет ходить справа налево), можно перед перебором добавить reverse()
на массив.
const data = ["Nastya", "Katya", "Lena", "Lera"];
let content = document.getElementById("content");
let deleteBtn = document.getElementById("delete");
function showData() {
data.forEach(item => {
let p = document.createElement("p");
p.innerHTML = "<input type='checkbox' class='checkbox'>" + item;
content.appendChild(p);
});
}
showData();
deleteBtn.addEventListener("click", function() {
let checkbox = document.getElementsByClassName("checkbox");
let checkedInd = [];
Array.from(checkbox, (item, i) => {
if (item.checked) checkedInd.push(i);
});
checkedInd.reverse().forEach(item => {
data.splice(item, 1);
});
content.innerHTML = "";
showData();
});
<div id="content"></div>
<button id="delete">Delete</button>
Но оно один раз проходит и переворачивает, а потом еще раз перебирает. В таких случаях легче использовать обычный цикл в обратную сторону:
for( let i = checkedInd.length - 1; i >= 0; i-- ){
data.splice( checkedInd[i], 1);
}
Но... Можно было не обновлять весь список после каждого удаления, а просто взять и удалить только то, что нужно:
const data = ["Nastya", "Katya", "Lena", "Lera"];
showData();
handleDelete();
function showData(){
let content = document.getElementById("content");
let html = data.map( name => {
return '<p><input type="checkbox" class="checkbox"> ' + name + '</p>';
}).join(''); // Нет реальной разницы, вставлять строку или createElement. Как удобнее.
content.insertAdjacentHTML('beforeend', html);
}
function handleDelete(){
let deleteBtn = document.getElementById("delete");
deleteBtn.addEventListener("click", function() {
let names = document.querySelectorAll('#content .checkbox');
for( let i = names.length - 1; i >= 0; i-- ){
if( names[i].checked ){
data.splice( i, 0 );
names[i].parentNode.outerHTML = "";
}
}
});
}
<div id="content"></div>
<button id="delete">Delete</button>
if (checkedInd !== [])
не имеет смысла, кстати - всегда будет давать true) Потому чтоconsole.log( [] == [] ) // false
— сравниваются два совершенно разных массива, даже если их содержимое одинаковое, они всё равно не равны. Если хочется, чтобы для пустого массива не выполнялся код, можноif ( checkedInd.length )
— даст false только если длина равна нулю.