如何使用按钮从 Javascript 中的数组中删除特定元素

Question

我希望能够按下我的垃圾桶并能够删除我想要的任何待办事项。现在我只能在拼接的帮助下从我的 todo 中删除第一个索引。此外，当我在控制台中检查我的数组时，我希望能够使用 true 或 false。因此，当我单击我的按钮时，我的对象会从我的屏幕中删除，并在控制台中的数组内部它应该显示我的对象确实已被删除并变为 true 而不是 false（todoIsRemoved: false）。这是一个链接，因此您可以查看我的所有代码：https://jsfiddle.net/marvstarv/tqdzn8bg/。

这是我的课：

let p=0;
let allTheToDos = [];

class Todo{
    constructor(toDoItem, removedToDo){
        this.Id= p ++;
        this.toDoItem = toDoItem;
        this.removedToDo = removedToDo;
    }
}

这是我需要帮助的功能，

function removeTask (){
    let liContainer = document.getElementById ("mySection"); // contains my label(checkmark), Li, and trashcan button.
    allTheToDos.splice(Todo,1);
    liContainer.innerHTML="";
    generateHtml();
    console.log(allTheToDos);
}

这个函数连接到我的“main.js”的第 64 行：deleteButton.addEventListener('click', () =>{removeTask(allTheToDos[i])});

感谢所有帮助，如果有任何不清楚的地方请回复我。在此处输入代码

Answer 1

我将你的 Js 文件更新为：

window.onload = function(){
    // without this my site keeps realoding when adding a new item
    let firstTask = new Todo ('Bädda sängen',false);
    let secondTask = new Todo ('Hänga upp tavlorna',false);
    let thirdTask = new Todo ('Kick back & realx',false);

    // Adding my premade todo's into my Array that has the variable 'allTheToDos'
    allTheToDos.push(firstTask);
    allTheToDos.push(secondTask);
    allTheToDos.push(thirdTask);

    // creating a function so that the user can add a new todo
    let addButton = document.getElementById('addBtn');
    addButton.addEventListener('click',addNewTask);

    generateHtml ();

    // let checkedLi = document.getElementById('listItem')
    // checkedLi.addEventListener('click',)

    console.log(allTheToDos);
}
// my puublic 
let p=0;
let allTheToDos = [];

class Todo{
    constructor(toDoItem, removedToDo){
        this.Id= p ++;
        this.toDoItem = toDoItem;
        this.removedToDo = removedToDo;
    }
}



function generateHtml (){
    // Creating an Ul for my items
    let section = document.getElementById('mySection');
    let myUl = document.createElement('ul');
    myUl.className = 'listContainer';
    section.appendChild(myUl);

    // Creating the loop for my premade todo objects
    for(i=0; i<allTheToDos.length; i++){
        // Create a div wrapper for my li
        let myListWrapperItemContainer = document.createElement('div');
        myListWrapperItemContainer.className = "listItemsWrapper";

        let id = `to_do_${i}`;
        myListWrapperItemContainer.id = id;
        // Creating Checked button
        let checkedIcon = document.createElement('label');
        checkedIcon.className = 'checkedIcon listItemsIcon';
        checkedIcon.innerHTML = '<i class="fas fa-check"></i>';
        //Creating li
        let myLi = document.createElement("li");
        myLi.classList = "listItem lineTrough";
        myLi.id= "listItem";
        // Creating delete button
        let deleteButton = document.createElement('button');
        deleteButton.id ="deleteButton";
        deleteButton.className = 'trashCan listItemsIcon';
        deleteButton.innerHTML = '<i class="fas fa-trash-alt"></i>';
        // OnClick
        deleteButton.addEventListener('click', () => {removeTask(id)});

        // Adding everything to my html
        myListWrapperItemContainer.appendChild(checkedIcon);
        myListWrapperItemContainer.appendChild(myLi);
        myListWrapperItemContainer.appendChild(deleteButton);
        myLi.innerHTML = allTheToDos[i].toDoItem;
        myUl.appendChild(myListWrapperItemContainer);
    }
}

function addNewTask (stopRefresh){
    stopRefresh.preventDefault();
    let liContainer = document.getElementById ("mySection");
    let inputValue = document.getElementById('textBox').value;
    liContainer.innerHTML="";

    if (inputValue == ""){
        alert("Type in something");
        generateHtml();
    }
    else{
        let newInputValue = new Todo (inputValue);
        allTheToDos.push(newInputValue);
        generateHtml();
    }

}
function removeTask (id){
    let element = document.getElementById(id);
    let index = allTheToDos.findIndex(e => e.toDoItem === element.textContent);
    allTheToDos.splice(index,1);
    element.parentNode.removeChild(element);
}