使用querySelector无法删除列表项内类名相同的指定Update按钮

你只需要在completeTask函数中添加选中并移除Update按钮的逻辑即可，之前移除失效大概率是执行顺序错误或者选择器书写不正确，建议在移动列表项到已完成列表之前，就把不需要的元素处理干净，修改后的代码如下：

let completeTask = function(){
    let listItem = this.parentNode;
    let deleteBtn = document.createElement('button');
    deleteBtn.innerText = 'Delete';
    // 直接复用已完成列表的delete按钮类名，无需额外添加内联样式
    deleteBtn.className = 'delete py-1 ml-12 px-2 text-md text-white rounded bg-red-400 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50';
    listItem.appendChild(deleteBtn);
    
    // 移除复选框
    let checkBox = listItem.querySelector('input[type="checkbox"]');
    checkBox.remove();
    // 移除Update按钮，按类名选择对应元素即可
    let updateBtn = listItem.querySelector('button.update');
    updateBtn.remove();
    // 所有元素处理完成后再追加到已完成列表
    completeUl.appendChild(listItem);

    bindDeleteItems(listItem,deleteTask);
} 

注意事项 #

• 如果之前移除失败，优先检查Update按钮的类名选择器是否拼写正确，不要写错update类名
• 元素处理逻辑尽量放在移动列表项到新父节点之前执行，避免DOM结构变动后找不到对应元素的问题

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