Javascript拼接数组不规则

Question

我正在尝试在单击某个元素时拼接一个数组。当我 console.log 新数组时，它是不规则的，有时会删除错误的数组元素，并且永远不会删除最后一个索引。有人对此有很好的解释吗？

var container = document.getElementById('container'),
notDone = document.getElementsByClassName('notDone'),
deleting = document.getElementsByClassName('delete'),
div,
remove,
i,
toDo = [
'One',
'Two',
'öäå'],


for(i = 0; i < toDo.length; i++){
    div = document.createElement('div');
    div.innerHTML = toDo[i];
    div.className = 'notDone';
    remove = document.createElement('div');
    remove.innerHTML = '<p>Remove</p>';
    remove.setAttribute("data-id", i);
    remove.className = 'delete';

    container.appendChild(div);
    div.appendChild(remove);

    notDone[i].addEventListener('click', function(){

        if(this.classList.contains('notDone')){
            this.className = 'done';
        }else{
            this.className = 'notDone';
        }
    });

    deleting[i].addEventListener('click', function(event){
        event.stopPropagation();
        var shouldDelete = this.getAttribute("data-id");
        console.log('va' + shouldDelete);
        toDo.splice(shouldDelete, 1);
        this.parentNode.remove();
        console.log(toDo);
    });
}
var check = document.getElementById('check');
check.addEventListener('click', function(){
    console.log(toDo + ' checking array')
});

Answer 1

it sometimes removes the wrong array element

您面临的问题是 data-id 存储的是固定索引，而 toDo 数组是可变的。当您从数组中删除一个元素时，它后面的所有索引都将失效。例如，当你 .splice(0, 1) 时，你不能再做 splice(2, 1) 因为数组只剩下两个项目。

the last index will never be removed.

如果您首先单击最后一个元素，它会。

你可以做的是

不从 toDo 数组中删除索引（并切割整个数组），而只是将数组值设置为 null；或
不存储原始索引，而是存储要删除的值，并在每次删除元素时在当前数组中搜索它们（使用indexOf）

Javascript拼接数组不规则

Spliced array in Javascript is irregular

javascript

arrays

array-splice