如何通过事件 Onclick 删除推入数组的对象？

Question

出于学习目的，我正在 JavaScript 中创建一个 Todo 应用程序。我有一个函数，它接受输入值（任务）并将其推送到对象数组。

我希望能够在单击删除按钮时从数组 listOfTask 中删除对象任务，并且我希望在单击完成按钮时将已完成的属性任务切换为 true。我的问题是用户可以随机单击数组中的任何对象。所以我不能 link 事件点击到我想使用索引操作的对象。任何关于如何实现这一目标的想法都将受到高度赞赏。顺便说一句，这是我第一次发布问题，如果我的问题需要改进或澄清，请告诉我。

let listofTask=[];
function addTask(){
 let taskAdded= document.getElementById('input1').value;

 let task=new Object;
 task.task=taskAdded;
 task.completed=false;

 listOfTask.push(task);
 appendTask(listOfTask);
   
}

因此函数 appendTask() 为每个任务创建两个按钮并将它们打印到 HTML

function appendTask(array){
    
    if(array.length>0){
        
        let div=document.getElementById('show-tasks');
        
        let ul= document.createElement('ul');
        
        let completedButton= document.createElement('input');
        completedButton.value= 'Completed';
        completedButton.type='button';
        completedButton.onclick=function completedTask(){
            this.parentNode.classList.add("mark-completed");
        }
        
        let deleteButton= document.createElement('input');
        deleteButton.value='Delete';
        deleteButton.type='button';
        
        deleteButton.onclick= function deleteTask(){
            this.parentNode.remove();
        }

        ul.innerHTML=ul.innerHTML+`<li>${array[array.length-1].task}</li>
                                     `;

        ul.appendChild(completedButton);
        ul.appendChild(deleteButton);
        div.appendChild(ul)
        

    
}
}

此时我能够成功地将任务标记为已完成并将其从 HTML 中删除，但我也希望能够操作数组中的对象。谢谢！

Answer 1

总是很高兴看到新的开发人员投入其中！
实现预期目标的一种方法是给每个 Object 一个属性 id 来唯一标识它。然后，当单击 delete 按钮时，您可以使用数组函数 findIndex 找到要删除的元素。

如何通过事件 Onclick 删除推入数组的对象？

How can I remove, with the event Onclick, the objects pushed into an array?

javascript

arrays

object

onclick