Javascript 如何将删除功能添加到我的todo应用程序？

const btnTodo=document.querySelector（'.btnTodo'）；
const todoList=document.querySelector（'.todoList'）；
const removeBtn=document.querySelector（'.btnRemove'）；
btnTodo.addEventListener（'单击'，（）=>{
var todoText=txtTodo.value.trim（）；
var listItem=document.createElement（'p'）；
listItem.innerHTML=todoText+''+'
'；
todoList.append（列表项）；
txtTodo.innerText=null；
});
removeBtn.addEventListener（'单击'，（）=>{
//怎么办？？
});

---

我在上高中。我想在我的todo应用程序中包含删除功能。我是根据学校给我的知识来做的。

好的，有多种方法可以做到这一点，这里有一种方法：

let txtTodo = document.querySelector('.txtTodo');
let btnTodo = document.querySelector('.btnTodo');
let todoList = document.querySelector('.todoList');

btnTodo.addEventListener('click', () => {
    let todoText = txtTodo.value.trim();
    let listItem = document.createElement('p');
    listItem.innerHTML = todoText + '&nbsp;<button class="btn btnRemove"><i class="big fas fa-trash"></i></button>' + '<br>';
    todoList.append(listItem);
    txtTodo.innerText = null;

    listItem.querySelector('.btnRemove').addEventListener("click", () => {
        listItem.remove()
    });
});

让txtTodo=document.querySelector（'.txtTodo'）；
让btnTodo=document.querySelector（'.btnTodo'）；
让todoList=document.querySelector（'.todoList'）；
btnTodo.addEventListener（'单击'，（）=>{
让todoText=txtTodo.value.trim（）；
让listItem=document.createElement（'p'）；
listItem.innerHTML=todoText+''+'
'；
todoList.append（列表项）；
txtTodo.innerText=null；
listItem.querySelector（'.btnRemove'）.addEventListener（“单击”，（）=>{
listItem.remove（）
});
});

需要记住的一件事是，预先将所有remove按钮存储在一个变量中（如第3行中尝试的那样）是行不通的，因为is不是活动集合，因此当您在DOM中附加新按钮时，存储的集合将变得过时。因此，向新添加的元素添加事件侦听器是一个好主意，就像我上面所做的那样

您还应该执行

txtTodo.value=“”

而不是

txtTodo.innerText=null以清除输入

祝你好运
 TanqWebdevExpert@AxityaTripathi哈哈，不客气！很乐意帮忙！特别是，你坚持什么？
let txtTodo = document.querySelector('.txtTodo');
let btnTodo = document.querySelector('.btnTodo');
let todoList = document.querySelector('.todoList');

btnTodo.addEventListener('click', () => {
    let todoText = txtTodo.value.trim();
    let listItem = document.createElement('p');
    listItem.innerHTML = todoText + '&nbsp;<button class="btn btnRemove"><i class="big fas fa-trash"></i></button>' + '<br>';
    todoList.append(listItem);
    txtTodo.innerText = null;

    listItem.querySelector('.btnRemove').addEventListener("click", () => {
        listItem.remove()
    });
});