G
Maybe it's because after the removal of the first element, former second becomes the first.It's connected. If in one cycle it is necessary to remove a few elements from the mass, the retracting shall be completed, since the indices are updated after the removal of each element: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]
Четвертого уже нет!)
*/In your case, if you really want to go through forEach, he can't walk right to left, you can add before the bulkhead. reverse() to the mass.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>But it passes once and turns around, and then it takes again. In such cases, it is easier to use the normal cycle backwards:for( let i = checkedInd.length - 1; i >= 0; i-- ){
data.splice( checkedInd[i], 1);
}
But... You could not update the entire list after each removal, but just take and delete what you need: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>
