时间戳

首页 > 解决方案 > 如何向我的待办事项应用程序添加删除功能？

javascript - 如何向我的待办事项应用程序添加删除功能？

问题描述

Jsfiddle在这里

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

我在高中。我想在我的 todo 应用程序中包含一个删除功能。我是根据学校给我的知识做到这一点的。

标签： javascripthtmlcss

解决方案

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

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

小提琴

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

此外，您应该这样做txtTodo.value = "";而不是txtTodo.innerText = null;清除输入。

祝你好运！

推荐阅读