Javascript - classList 事件监听器的问题

Question

我有一个“+”按钮，单击该按钮时，会触发创建一个带有输入和 2 个按钮的 block ，一个用于验证输入，一个用于删除输入。

//我的代码看起来几乎像这样:

    addBtn.addEventListener('click', e => {
        addClick++;

// All the elements of the same line (input and 2 buttons) have an int in common in their id string ==> addClick 

// I'm missing all the declarations of the variables here
    blockDiv.appendChild(posteInput);
    blockDiv.appendChild(validateBtn);
    blockDiv.appendChild(deleteBtn);
    globalPostesBlock.appendChild(blockDiv)

    let allDeleteBtn = document.getElementsByClassName('delete-button');

        for (let i = 0; i < allDeleteBtn.length; i++) {

            allDeleteBtn[i].addEventListener('click', e => {

                    // Retrieving the block with the same id
                    let deleteBtnId = parseInt((allDeleteBtn[i].getAttribute('id').match(/\d+/g)).toString());
                    let singlePosteBlock = document.getElementById(`poste-block-${deleteBtnId}`);
                    singlePosteBlock.remove();
                }

            })
        }

事件监听器代表单击删除按钮的操作，以便它可以删除其整个包含 block

我对验证按钮有相同的逻辑，但我在其中使用了 ajax。

每次创建一个新 block 时，我都想创建一个与该 block 关联的事件监听器，但到目前为止我发现的只是每个按钮上都有一个循环的事件监听器，所以发生的情况是该操作由于循环，触发次数与 block 数一样多，但我不知道如何分离每个事件监听器。

如果我有 3 个 block ，并且我验证了随后插入到数据库中的一个输入值，则该值将被插入 3 次。

Answer 1

这有帮助吗？

//id pool
let latestId = 0;

//retrive the button
var myButton = document.querySelector("button");

myButton.addEventListener("click", createKids);

//function declaration :: createKids
function createKids() {
  latestId++;
  //declare and initialization
  let div = document.createElement("div");
  let input = document.createElement("input");
  let buttonSend = document.createElement("button");
  let buttonDelete = document.createElement("button");

  //append input & buttons to div
  div.appendChild(input);
  div.appendChild(buttonSend);
  div.appendChild(buttonDelete);

  //Some beautifying
  buttonSend.innerText = "Send me";
  buttonDelete.innerText = "Delete me";

  //some logic
  div.dataset.id = latestId;

  //event handeling
  buttonSend.addEventListener("click", sendItem);
  buttonDelete.addEventListener("click", deleteItem);

  //insert div
  document.body.appendChild(div);
}

function sendItem(event) {
  //do action and delete ?
  let input = event.target.parentNode.querySelector("input");


  //retrive data
  let val = input.value;
  let id = event.target.parentNode.dataset.id;
  
  //disable input for fun ^^
  input.disabled = true;
  
  //console istead of send 
  console.log(id,val);

  //handle some more
  setTimeout(() => {
    event.target.parentNode.remove();
  }, 3000);
}

function deleteItem(event) {
  event.currentTarget.parentNode.remove();
}

<p>Does this help?</p>
<button>Magic Button</button>