如何通过Onclick点击事件删除push进数组的对象并修改其属性？

首先你现有代码存在变量名大小写不一致问题，开头声明的listofTask后续使用时写成了listOfTask，会导致未定义报错，建议先统一为listOfTask。

以下是两种可行的实现方案： #

方案1：闭包直接绑定当前任务（适合简单场景，无需额外属性） #

原理：每次调用appendTask时渲染的都是数组最后一个新增的任务，你可以在函数内提前把当前任务的索引和对象用常量存储，利用闭包特性让点击事件可以直接访问到对应的值，无需额外绑定标识。

修改后的appendTask代码：

function appendTask(array){
    if(array.length <= 0) return
    // 提前存储当前要渲染的任务索引和对象，闭包会保留这两个值给对应按钮的点击事件
    const currentIndex = array.length - 1
    const currentTask = array[currentIndex]

    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");
        // 同步修改数组中对应任务的状态
        currentTask.completed = true
    }

    let deleteButton= document.createElement('input');
    deleteButton.value='Delete';
    deleteButton.type='button';
    deleteButton.onclick= function deleteTask(){
        this.parentNode.remove();
        // 同步删除数组中对应位置的元素
        listOfTask.splice(currentIndex, 1)
    }

    ul.innerHTML += `<li>${currentTask.task}</li>`;
    ul.appendChild(completedButton);
    ul.appendChild(deleteButton);
    div.appendChild(ul)
}

方案2：给任务加唯一ID绑定（适合复杂场景，支持排序/筛选等数组变动操作） #

如果后续你会做任务排序、筛选等会改变数组元素顺序的功能，闭包绑定的索引会失效，此时可以给每个任务加唯一标识，通过DOM自定义属性存储ID来匹配数组元素。

第一步：修改addTask给任务对象加唯一ID #

let listOfTask = [];
function addTask(){
    let taskAdded= document.getElementById('input1').value;
    // 用时间戳生成唯一ID，个人项目场景下足够使用
    let task = {
        id: Date.now(),
        task: taskAdded,
        completed: false
    }
    listOfTask.push(task);
    appendTask(listOfTask);
}

第二步：改造appendTask绑定ID并通过ID匹配数组元素 #

function appendTask(array){
    if(array.length <= 0) return
    const currentTask = array[array.length - 1]

    let div=document.getElementById('show-tasks');
    let ul= document.createElement('ul');
    // 给父节点绑定自定义属性存储任务ID
    ul.dataset.taskId = currentTask.id

    let completedButton= document.createElement('input');
    completedButton.value= 'Completed';
    completedButton.type='button';
    completedButton.onclick=function completedTask(){
        this.parentNode.classList.add("mark-completed");
        // 拿存储的ID匹配数组中对应任务修改状态
        const taskId = Number(this.parentNode.dataset.taskId)
        const targetTask = listOfTask.find(item => item.id === taskId)
        if(targetTask) targetTask.completed = true
    }

    let deleteButton= document.createElement('input');
    deleteButton.value='Delete';
    deleteButton.type='button';
    deleteButton.onclick= function deleteTask(){
        this.parentNode.remove();
        // 拿存储的ID匹配数组中对应任务删除
        const taskId = Number(this.parentNode.dataset.taskId)
        const targetIndex = listOfTask.findIndex(item => item.id === taskId)
        if(targetIndex > -1) listOfTask.splice(targetIndex, 1)
    }

    ul.innerHTML += `<li>${currentTask.task}</li>`;
    ul.appendChild(completedButton);
    ul.appendChild(deleteButton);
    div.appendChild(ul)
}

内容的提问来源于stack exchange，提问作者user16604664