为什么我的删除按钮不起作用，除非我在不同的 div 中使用不同的删除按钮？

Question

I am learning JavaScript and trying to create a todo app and when I hover my active lists, I want to be able to delete the content of that list while it's active. Instead, it deletes the content when I click on a div with dummy data on it that I use just for reference that also has a delete button. These are the snippets that I need help with.

I am not sure what else to write down. Apparently I need more words just to ask this specific question so I am just randomly writing just so I can push this out and ask for help.

https://jsfiddle.net/delo2795/xbp8vfeh/5/

const listsContainer = document.querySelector('[data-lists]')

listsContainer.addEventListener('mouseover', e => {
    if (e.target.tagName.toLowerCase() === 'li') {
        selectedListId = e.target.dataset.listID
        
        console.log(selectedListId)
        saveAndRender()

        
    }

})

deleteListButton.addEventListener('click', e => {
    // find lists of tasks that is not selected
    lists = lists.filter(list => list.id !== selectedListId)
    // take the list that is selected and remove from memory
    selectedListId = null 

    saveAndRender()
})

newListForm.addEventListener('submit', e => {
    e.preventDefault()

    // Get information from the user form
    const taskInput = taskname.value 
    const assignInput = assign.value 
    const descriptionInput = description.value
    const dueDateInput = duedate.value 


    // user has to input something in the field
    // if (taskInput == null || taskInput === '') return
    // if (assignInput == null || assignInput === '') return
    // if (descriptionInput== null || descriptionInput === '') return
    // if (dueDateInput == null || dueDateInput === '') return
   
    // create List
    const list = createList(taskInput, assignInput, descriptionInput,dueDateInput)
    
    // Update the List
    lists.push(list)
    // save List to Browser and Show List on Browser
    saveAndRender()
})

function createList(taskInput, taskAssign, taskDescription, taskDueDate) {
    // Initializes the variables and saves it to list
    return { 
        id: Date.now().toString(), 
        taskInput: taskInput,
        taskAssign: taskAssign,
        taskDescription: taskDescription,
        taskDueDate: taskDueDate,
        taskCompleted: false
    } 
}

function render() {
    clearElement(listsContainer)
    lists.forEach(list => {

        // create new list item container
        const listElement = document.createElement('li')
        listElement.dataset.listID = list.id
        listElement.classList.add('list-group-item', 'shadow-lg', 'rounded')

        if (list.id === selectedListId) {
            listElement.classList.add('activeList')
        }
     }
}

render()

Answer 1

You should use an array to store the data. When a user clicks on a delete button (which will be assigned a function like DELETE(id)), the JS will delete it from the array and then rerender the notes from the array. This will help keep your app more structured.