Блог

Пытаюсь реализовать кнопку удаления для простого ванильного приложения 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 !== "" amp;amp; 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 = [];


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 !== "" amp;amp; 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 => {
      q.toElement.parentElement.parentElement.remove()
    })
  });
}
debugger;
addBtn.addEventListener("click", addNoteHandler);  

 Title<input id="note-title"> Content
<input id="textBox">

<button class="add-button">Click Here</button>
<div class="modal"> </div>