无法使用queryselector删除在列表标题项中具有相同类名的特定按钮？

Question

在我的未完成任务和已完成任务中:我希望当我检查我的未完成任务来完成任务时，我不想显示我的更新按钮，只有任务名称和删除按钮将在那里，没有其他:请参阅我的JS文件:一个completeTask()函数，以了解更多的问题：

HTML：

 <p class="text-2xl py-1 font-bold">
                            Incomplete Tasks
                        </p>
                        <hr>
                        <ul id="items">
                            <li class="py-5 px-2 item"><input type="checkbox" />
                                <label>Task Name</label>
                                <button class="update py-1 ml-12 px-2 text-md text-white rounded  bg-gray-400 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-opacity-50">Update</button>
                            </li>
                            <li class="py-5 px-2 item"><input type="checkbox" />
                                <label>Task Name</label>
                                <button class="update py-1 ml-12 px-2 text-md text-white rounded  bg-gray-400 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-opacity-50">Update</button>
                            </li>
                            <li class="py-5 px-2 item"><input type="checkbox" />
                                <label>Task Name</label>
                                <button class="update py-1 ml-12 px-2 text-md text-white rounded  bg-gray-400 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-opacity-50">Update</button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bg-white p-6 rounded">
                    <div>
                        <p class="text-2xl py-1 font-bold">
                            Completed Tasks
                        </p>
                        <hr>
                        <ul id="items2">
                            <li class="py-5 px-2 item">
                                <label>Task Name</label>
                                <button class="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">Delete</button>
                            </li>
                        </ul>
                    </div>

JS文件：

let completeTask = function(){
    let listItem = this.parentNode;
    let deleteBtn = document.createElement('button');
    deleteBtn.innerText = 'Delete';
    deleteBtn.className = 'delete';
    deleteBtn.style.paddingLeft = '10px';
    listItem.appendChild(deleteBtn);
    
   
    let checkBox = listItem.querySelector('input[type="checkbox"]');
    checkBox.remove();
    completeUl.appendChild(listItem);
    
//here my checkbox I successfully remove it, but in the same way when I do for update button it don't work. //  

    bindDeleteItems(listItem,deleteTask);
} 

Answer 1

创建一个默认的类名，比如“未选中/未完成”。选择任务时，有条件地检查是否勾选。如果它被选中，那么添加一个类"checked/completed“，并通过在类名之前使用一个隐藏标签来隐藏更新的按钮。

Answer 2

因此，首先在"completeTask“函数中，当您选中复选框时，有条件地在更新按钮”完成“中添加一个额外的类。

然后再次运行querySelector以查找“已完成”的类。之后，从ListItems中删除该按钮。