Javascript 使用forEach循环选择按钮类

正在尝试为下面的简单vanilla JS note应用程序实现删除按钮。当我将查询选择器应用于单个delete button类时，它只能选择第一个附加的子项，而当使用querySelectorAll时，它会为页面上的每个附加按钮迭代click函数

我应该用在这里吗？在底部的deleteBtn调用中，我做错了什么？对不起，如果代码混乱

const addBtn = document.querySelector(".add-button");
const noteArea = document.querySelector(".modal");


let notes = [];


function addNoteHandler() {
    //pull value from note box
    let title = document.querySelector("#note-title").value;
    let note = document.querySelector("#textBox").value;
    
    //check if boxes are empty and push note contents to array (obj?)
    if (note !== "" && title !== "") {
    notes.push(title, note);

    //create note card items
    let containerDiv = document.createElement("div");
    let titleModal = document.createElement("h6");
    let noteModal = document.createElement("p");
    let viewButton = document.createElement("button");
    let deleteButton = document.createElement("button");
    let buttonDiv = document.createElement("div");

    //define content and classes
    containerDiv.className = "card-class";
    titleModal.className = "card-header";
    titleModal.innerText = `${title}`;
    noteModal.className = "modal-p";
    
    viewButton.innerText = "View Note";
    viewButton.className = "expand-modal";

    deleteButton.innerText = "Delete Note";
    deleteButton.className = "delete-button";

    //create text node that houses the p
    let textBox = document.createTextNode(note);


    //append items to container div
    noteModal.appendChild(textBox);
    
    containerDiv.appendChild(titleModal);
    containerDiv.appendChild(noteModal);
    buttonDiv.appendChild(viewButton);
    buttonDiv.appendChild(deleteButton);
    containerDiv.appendChild(buttonDiv);
    noteArea.appendChild(containerDiv);
    // noteModal.appendChild(textBox);
    // noteArea.appendChild(noteModal);
    } else {
        alert("Please Enter A Note First!")
    } 

       //define delete button
    const deleteBtn = document.querySelectorAll(".delete-button").forEach(e => {
        e.addEventListener("click", q => {
            console.log("clicked");
        })
    });
}

addBtn.addEventListener("click", addNoteHandler);

---

如果我理解正确，您只需要在单击“删除注释”按钮时删除注释。您应该使用父属性以containerDiv为目标，并且应该能够删除注释。参见示例

const addBtn=document.querySelector.add-button； const noteArea=document.querySelector.modal； let notes=[]； 函数addNoteHandler{ //从注释框中提取值 让title=document.querySelectornote-title.value； let note=document.querySelectortextBox.value； //检查框是否为空，并将注释内容推送到数组obj？ 如果注释！=&&title！=={ notes.pushtitle，note； //创建注释卡项目 让containerDiv=document.createElementdiv； 让titleModel=document.createElementh6； 让notemodel=document.createElementp； 让viewButton=document.createElementbutton； 让deleteButton=document.createElementbutton； 让buttonDiv=document.createElementdiv； //定义内容和类 containerDiv.className=卡类； titleModel.className=卡头； titleModel.innerText=`${title}`； noteModal.className=modal-p； viewButton.innerText=查看注释； viewButton.className=展开模式； deleteButton.innerText=删除注释； deleteButton.className=删除按钮； //创建包含p的文本节点 设textBox=document.createTextNodenote； //将项目附加到容器div noteModal.appendChildtextBox； 容器IV.附加子标题模式； 集装箱四、附加物、运输工具； 按钮iv.appendChildviewButton； 按钮iv.appendChildDelete按钮； 容器iv.附件iv； noteArea.appendChildcontainerDiv； //noteModal.appendChildtextBox； //noteArea.appendChildnoteModal； }否则{ 请先输入一张便条！ } //定义删除按钮 const deleteBtn=document.queryselectoral.delete-button.forEache=>{ e、 addEventListenerclick，q=>{ q、 toElement.parentElement.parentElement.remove } }; } 调试器； addBtn.addEventListenerclick，addNoteHandler； 标题内容 点击这里

---

deleteBtn将包含未定义的。必须为deleteBtn赋值或使用forEach方法，但不能同时使用两者。函数调用不在deleteBtn常量上，而是在内部的.delete按钮类上。我没有收到未定义的错误，只是为页面上的每个按钮复制单击的控制台日志。