JavaScript：待办列表中点击Complete按钮如何定位对应生成input？

问题说明 #

开发待办事项列表时，点击「Complete」按钮需要实现两个效果：

• 将对应生成的input元素背景设为绿色
• 给input内的文本添加删除线

遇到的问题是无法准确定位目标input元素，尝试e.target.parentElement会导致整个父元素变色，无法单独操作目标input。

解决方案 #

要准确定位目标input，可以通过以下逻辑实现：

1. 明确DOM层级：点击的Complete按钮（.edit-btn）和包含input的li是同级元素，都在.todo父容器内
2. 通过父容器遍历找到目标input：先拿到按钮的父容器，再在容器内筛选.generated-input元素
3. 结合CSS类和行内样式完成视觉效果：用已定义的.completed类实现删除线，直接给input设置背景色（或新增CSS类统一管理）

修改后的代码 #

JavaScript部分 #

// Selectors
const addButton = document.querySelector('.todo-button');
const toDoInput = document.querySelector('.todo-input');
const toDoUi =  document.querySelector('.todo-list');


// Event Listeners
addButton.addEventListener('click', addToDoItem);
toDoUi.addEventListener('click', deleteItem);
toDoUi.addEventListener('click', completeItem);


// Functions
function addToDoItem(event) {
    event.preventDefault()
    // Create DIV
    const div = document.createElement('div');
    div.classList.add('todo');
    // Create LI
    const li = document.createElement('li')
    li.innerHTML = `<input type="text" class="generated-input" value="${toDoInput.value}" disabled="disabled">`
    li.classList.add('todo-item')
    div.append(li)
    // Edit button
    const editButton = document.createElement('button')
    editButton.classList.add('edit-btn')
    editButton.innerText = 'Complete'
    div.append(editButton)
    // Delete button
    const deleteButton = document.createElement('button')
    deleteButton.classList.add('delete-btn')
    deleteButton.innerText = `Delete`
    div.append(deleteButton)

    toDoUi.append(div);

    toDoInput.value = '';
   
}

// Delete Function
function deleteItem(e) {
    if (e.target.classList[0] === 'delete-btn') {
        const todo = e.target.parentElement;
        todo.remove()
    }
}

// 修改后的完成功能函数
function completeItem(e) {
    if (e.target.classList[0] === 'edit-btn') {
        // 获取当前按钮的父容器（.todo）
        const todoContainer = e.target.parentElement;
        // 在父容器内找到目标input元素
        const targetInput = todoContainer.querySelector('.generated-input');
        
        // 切换完成/未完成状态
        if (e.target.innerText === 'Complete') {
            // 设置完成状态样式
            targetInput.style.backgroundColor = 'green';
            targetInput.classList.add('completed');
            e.target.innerText = 'Undo';
        } else {
            // 恢复未完成状态
            targetInput.style.backgroundColor = '#ffffff';
            targetInput.classList.remove('completed');
            e.target.innerText = 'Complete';
        }
    }
}

可选CSS优化（推荐用类统一管理样式） #

如果不想用行内样式，可以新增一个CSS类：

.completed-input {
    background-color: green;
}

然后在JS中替换行内样式代码：

// 完成状态
targetInput.classList.add('completed-input');
// 取消完成状态
targetInput.classList.remove('completed-input');

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