Question

我有一个按钮，用于从DOM中删除元素。

现在的问题是，直到将新项目添加到待办事项列表中，按钮才出现。

我创建了删除项目的函数，方法是将其ID传递给函数，但我没有返回错误，并且按钮不起作用。

代码中有东西吗？这是代码段：

const cancelBtn = document.querySelector('.cancel__btn');

function deleteItem(id) {
    if (el) {
        el = document.querySelector(`.task["task-${id}"]`);
        cancelBtn.addEventListener('click', id => {
            el.parentNode.removeChild(el);
            console.log("clicked");
        });

        }       

};

还是我出了点问题？

Answer 1

代码中有多个问题。您使用的是属性选择器而不是ID选择器。您的id值需要保持在范围内，因为它是在范围之外声明的，因此将使用id的最后一个值。位置增加也有问题。您的cancelBtn变量将不起作用，因为它是在页面加载时选择的，而您需要使用创建的每个cancelBtn。您的cancelBtn事件绑定不正确。您应该绑定每个cancelBtn，而不是绑定在delete函数中。

const newTask = document.querySelector('#add__task-btn');

const box = document.querySelector('#box');
const taskList = document.querySelector('.task__container');
const cancelBtn = document.querySelector('.cancel__btn');



let id = 0;
function addTaskFunc() {

    const aTask = `
    <div class="task" id="task-${id}">
    <button class="done__btn">
        <i class="far fa-check-square"></i>
    </button>
    <p>${box.value}</p>
    <button class="priority">Make priority</button>
    <button class="cancel__btn">
        <i class="far fa-times-circle"></i>
    </button>

    </div>
`;

    const x = box.value;
    taskList.insertAdjacentHTML('afterbegin', aTask);
    box.value = '';
    let cid = id;
        var cancelBtn = document.querySelector(`#task-${id} .cancel__btn`);
        cancelBtn.addEventListener('click', function(evt){
          deleteItem(cid);
        });

id++;
}

newTask.addEventListener('click', addTaskFunc);

function deleteItem(id) {
        var el = document.getElementById(`task-${id}`);
        el.remove();        


}

Answer 2

您没有在听按钮点击活动

   <button class="cancel__btn" onClick="deleteItem()">

无法识别按钮

2 个答案: