Question

Jsfiddle Here

const btnTodo = document.querySelector('.btnTodo');
const todoList = document.querySelector('.todoList');
const removeBtn = document.querySelector('.btnRemove');

btnTodo.addEventListener('click', () => {
    var todoText = txtTodo.value.trim();
    var 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;
});

removeBtn.addEventListener('click', () => {
    //WHAT TO DO??
});

我在上高中。我想在待办事项应用中加入删除功能。我靠学校提供的知识做到了这一点。

Answer 1

好吧，有多种方法可以做到这一点，这是其中一种方法：

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()
    });
});

Fiddle

要记住的一件事是，将所有删除按钮预先存储在变量中（如您在第3行中尝试的那样）将无法正常工作，因为这不是实时集合，因此当您将新按钮添加到变量中时DOM然后存储的集合将变得过时。因此，像我上面所做的那样，将事件侦听器添加到新添加的元素中是一个好主意。

此外，您应该执行txtTodo.value = "";而不是txtTodo.innerText = null;来清除输入。

祝你好运！

如何为我的待办事项应用添加删除功能？

1 个答案: