javascript - 如何在一个函数内部传播另一个函数？

Question

几乎完成了这个todoApp: https://jsfiddle.net/cpbt9dm7/

除了我有一个删除项目的功能(左侧边栏)之外，一切都运行良好

function deleteProject(){
    let allRemoveButtons = document.querySelectorAll('.delete-button');
    allRemoveButtons.forEach(function(el){
        el.addEventListener('click', function(){
            console.log(el.dataset.name);
            projectStorage.splice(el.dataset.name, 1);
            localStorage.setItem("items", JSON.stringify(projectStorage));
            location.reload();
        })
    })
}

该函数有效，但只能运行一次，它基本上不会传播到每个项目删除按钮。

如果我只添加一个项目，我可以将其删除；如果我添加 2 个项目，我只能删除 1 个项目，无论是哪一个；如果我添加超过 2 个项目，我仍然可以仅删除 1 个项目。

我在创建项目的函数内调用该函数:

function populateProjects(){
    let newDiv = document.createElement("div");
    newDiv.classList = "eachproject";
    newDiv.dataset.name = projectStorage[projectStorage.length - 1].dataset;

    let newButton = document.createElement('button');
    newButton.classList = "list-button";
    newButton.dataset.name = projectStorage[projectStorage.length - 1].dataset;
    newButton.innerHTML = projectStorage[projectStorage.length -1].title
    newButton.style.background = projectStorage[projectStorage.length -1].priority;

    let newSpan = document.createElement('span');
    newSpan.innerHTML = projectStorage[projectStorage.length -1].date
    newSpan.style.float = "right"
    let deleteButton = document.createElement('button')
    deleteButton.classList = 'delete-button'
    deleteButton.innerHTML = '<i class="fas fa-trash"></i>'
    deleteButton.dataset.name = projectStorage[projectStorage.length - 1].dataset;


    document
    .querySelector(".projects")
    .appendChild(newDiv)
    .appendChild(newButton)
    document
    .querySelector(".projects")
    .appendChild(newDiv)
    .appendChild(newSpan)
    document
    .querySelector('.projects')
    .appendChild(newDiv)
    .appendChild(deleteButton)    


    deleteProject();
}

Answer 1

问题可能出在您的 splice() 上。第一个参数是数组的整数索引(请参阅: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice )。您可以获取数据集名称的索引，然后在拼接中使用它。例如

var itemIndex = projectStorage.indexOf(el.dataset.name);
projectStorage.splice(itemIndex, 1);

或者，您可以使用过滤器创建一个删除数据集名称的新数组:

var newProjectStorage = projectStorage.filter(project => project.dataset !== el.dataset.name);