在页面加载后创建的元素上执行js函数

Question

我创建了一个函数，当按钮被点击时，元素被复制。然后单击该元素，将执行一个删除该元素的函数。问题是，删除函数只适用于第一个按钮(这是存在于页面上，因为js加载)，而它不工作的按钮，后来添加(这是不存在的，而js加载)。是否有任何方法可以使删除功能在新按钮上运行?

这是add函数

add() {
    let clone = document.querySelector('#element').cloneNode(true);
    document.querySelector('#element2').append( clone );
  }

这是移除函数(e是被点击的元素)

remove(e) {
    e.parentNode.remove();
  }

Answer 1

每次添加一个按钮时都必须在新按钮上附加事件侦听器

add() {
    let clone = document.querySelector('#element').cloneNode(true);
    clone.addEventListener("click", remove); // assuming the clicked and remove is that clone and not the #element2
    document.querySelector('#element2').append( clone );
  }