Question

所以我正在做我的待办事项应用程序，遇到了这个奇怪的问题，其中我的removeToDo函数以奇怪的模式定位错误的项目，除了第一个删除的项目（总是可以很好地删除）。假设我们数组中的ID为0到6的项目：

Clicked to remove item with ID = 3 - removed item with ID = 3
Clicked to remove item with ID = 4 - removed item with ID = 5
Clicked to remove item with ID = 5 - removed item with ID = 6
Clicked to remove item with ID = 0 - removed item with ID = 0
Clicked to remove item with ID = 2 - removed item with ID = 4
Clicked to remove item with ID = 1 - removed item with ID = 2
Clicked to remove item with ID = 6 - removed item with ID = 1

所以它并没有真正遵循明显的模式（认为可能是id + 1之类的东西，但看起来好像不是）。另外，我第二次进行了与上述完全相同的测试，以查看它是否随机化，不是随机化，结果完全相同。

这是一些代码 HTML

<body>
    <div class='app'>

        <ul id='list'>

        </ul>
        <div class="footer">
            <i class="fas fa-plus-circle" aria-hidden="true" id='addButton'></i>
            <input type="text" id='itemInput' placeholder="Add a to-do" />
        </div>
    </div>
<script src="./app.js"></script>

</body>

JS

const list = document.getElementById("list");
const input = document.getElementById("itemInput");

let id;

//get the item from the local storage
let data = localStorage.getItem('TODO');

//check if data is not empty
if(data) {
    LIST = JSON.parse(data)
    id = LIST.length; // set the list id to the last in the array
    loadList(LIST); // load all the items in the array to the UI 
} else {
    //if data is empty
    LIST = [];
    id = 0;
}

function loadList(array) {
    array.forEach(item => {
        addToDo(item.name, item.id, item.done, item.trash);
    })
}

function addToDo(toDo, id, done, trash) {

    // if trash is true do not execute the code below
    if (trash) {return ;}
    const DONE = done ? check : uncheck;
    const LINE = done ? lineThrough : "";

    const text =`
    <li class="item">
        <i class="far ${DONE}" id='${id}'></i>
            <div class="description ${LINE} wrap">${toDo}</div>
        <i class="fas fa-trash-alt" id='${id}'></i>
    </li>`;
    const position = "beforeend";
    list.insertAdjacentHTML(position, text);        
}

// remove to-do
function removeToDo(element, i) {
    let newList = [...LIST]
    element.parentNode.parentNode.removeChild(element.parentNode);
    i = newList.indexOf(newList[event.target.id]) //<-- i think that is the problem, the indexing is not working as it should, as a result app gets confused ?
    alert(i)
    //newList[event.target.id].trash = true;  
    newList.splice(i, 1);
    LIST = newList;
    console.log(LIST);
    return LIST;

}

// click listener for job complete and job delete
list.addEventListener('click', e => {
    const element = e.target;
    if(e.target.className == "fas fa-trash-alt" ){
        removeToDo(element);
    }else if(e.target.className == "far fa-circle") {
        jobComplete(element);
    }else if(e.target.className == "far fa-check-circle"){
        jobComplete(element);
    }
    }
)

//add a task with "enter" key
document.addEventListener("keyup", (event) => {
    if(event.keyCode == 13){
        const toDo = input.value;
            if(toDo) {
                addToDo(toDo, id, false, false);
                LIST.push(
                    {
                        name: toDo,
                        id: id,
                        done: false,
                        trash: false
                    }
                );
                localStorage.setItem('TODO', JSON.stringify(LIST));
                id++;
                input.value = '';
            }
        }
})

编辑：以怪异模式删除的项目在LIST数组中，我单击的实际按钮也可以删除。我认为我的解释不够好

Answer 1

我认为最好不要考虑用于删除项目的ID。您也可以考虑该值。代替splice（i，1），请尝试使用

newList = newList.filter(function( obj ) {
  return obj.name !== element.previousElementSibling.innerHTML;
});

Answer 2

问题是这样的：

.v-label.theme--light

数组的id = LIST.length; // set the list id to the last in the array属性返回数组中的项数，但数组索引从零开始。其中有5个项目（.length）的数组的最后一个项目索引为length === 5。

数组中最后一项的索引为4。

删除功能从数组中删除错误的项目

2 个答案: