时间戳

首页 > 解决方案 > 使用类名从数组中删除

javascript - 使用类名从数组中删除

问题描述

我正在创建一个简单的 TodoList 来创建和删除任务：

let btn= document.getElementById("createButton");
let tasks= [];

//function for creating task. This is working fine
btn.addEventListener('click', function(){
    let taskName= document.getElementById("taskName").value;
    let startTime= document.getElementById("startTime").value;
    let endTime= document.getElementById("endTime").value;
    // console.log(taskName, startTime, endTime);
    let currTask= {
        name: taskName,
        start: startTime,
        end: endTime
    }
    tasks.unshift(currTask);
    let createdTask= document.createElement('div');
    createdTask.id= taskName;
    createdTask.classList.add("mrg-auto");

    createdTask.innerHTML= `
    <p>Task name: ${taskName}</p>
    <p>Start time: ${startTime}</p>
    <p>End time: ${endTime}</p>
    <input type="submit" class="deleteButton" value="Delete">`;
    
    document.getElementsByTagName("main")[0].append(createdTask);
    // console.log(tasks.length);
})

//code from here does not work. This is the code for deletion
var del= document.getElementsByClassName("deleteButton");

for(let i=0;i<del.length;i++){
    del[i].addEventListener('click', function(){
        for(var j=0;j<tasks.length;j++){
            if(tasks[j].name==del[i].id){
                tasks.splice(j, 1);
                console.log("hello");
                break;
            }
        }
    });
}

我无法使用类名和拼接函数从数组中删除任务。我哪里错了？

标签： javascriptdomdom-events

解决方案

如何不循环元素，而是将事件处理程序附加到文档。像这样：

document.addEventListener('click',function(e){
   if(e.target && e.target.className  == 'deleteButton'){
     e.target.parentNode.parentNode.removeChild(e.target.parentNode)
     tasks.splice(tasks.findIndex(({name}) => name == e.target.parentNode.id), 1);
   }
});

PS：请注意，将 id 作为 taskNamecreatedTask.id= taskName;可能不是最佳做法。

推荐阅读