将 eventListener 附加到 Javascript 中的动态元素

Question

我正在制作一个待办事项列表，并且在添加新列表项时动态添加了 li 和 button 标签。该按钮是一个 x 应该删除列表项。我尝试了几件事，但不知道如何为每个单独的 x 按钮创建一个 eventListener 并在单击时删除相应的列表项。

renderTodos 函数用于创建所有动态添加的内容。我为每个按钮设置了一个数据索引，我试图在其中访问每个按钮以在每个动态按钮上附加一个eventListener，但我不确定如何实现它。根据我的阅读，应该有一种方法可以使用currentTarget 或事件目标来执行此操作，但我不明白它是如何工作的。

var input = document.querySelector('input[name=todoItem]'),

btnAdd = document.querySelector('button[name=add]'),
btnClear = document.querySelector('button[name=clear]'),
list = document.querySelector('.todo'),
storeList = [];

function renderTodos(){
  var el = document.createElement('li'),
  x = document.createElement('button');
  listLength = storeList.length;
  
  //Set text for remove button
  x.innerHTML = 'x';

  for(var i = 0; i < listLength; i++){
    el.innerHTML = storeList[i];
    list.appendChild(el);
    x.setAttribute('data-index', i);
    el.appendChild(x);
  }

  // check for correct data-index property on x button
}

function addTodos(){
  storeList.push(input.value);

  // Check that input is getting pushed to list array
  console.log(storeList);
  renderTodos();
}


function clearList(){
  // make list empty
  list.innerHTML = '';
  storeList.splice(0, storeList.length);
  //render empty list
  renderTodos();
  
  //Check that list array is empty
  console.log(storeList);
}

btnAdd.addEventListener('click', addTodos);
btnClear.addEventListener('click', clearList);

到目前为止，列表中的所有其他内容都有效，我只是不知道如何实现这个eventListener。

Answer 1

一个简单的例子可以是

//a click hadler is added to #mylist which is already present in the dom
document.querySelector('#mylist').addEventListener('click', function(e) {
  //assuming that the the `x` is in a span and it is the only span in the `li` we check for that, we can improve this check more to make sure we have actually clicked on the delete button
  if (e.target.tagName == 'SPAN') {
    //if so then since we know the structure we can delete the parent node of the target which is the span element
    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
  }
}, false);

//kindly forgive the use of jQuery here
for (var i = 0; i < 10; i++) {
  $('<li />', {
    text: i
  }).append('<span class="x">X</span>').appendTo('#mylist');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="mylist"></ul>

这是事件委托的一个非常基本的实现，其中实际事件被绑定到一个祖先元素，然后我们使用实际事件目标来确定是否对其采取行动。我们可以改进if 条件来测试一个类的任何其他属性！！！

Answer 2

您可以使用以下方式为每个按钮添加侦听器：

 x.innerHTML = '';
 x.onclick = function(){
   var node = this.parentNode;
   node.parentNode.removeChild(node);
 };

或者您可以保持 renderTodos 代码原样并将删除委托给父 UL：

// Add the listener
list.addEventListener('click', removeItem);

// The listener function
function removeItem(event) {
  var node = event.target;

  // Check that the click came from an X button
  // better to check against a class name though
  if (node.tagName &&
      node.tagName.toLowerCase() == 'button' &&
      node.innerHTML == 'x') {
    node = node.parentNode;
    node.parentNode.removeChild(node);
  }
}

Answer 3

基本上你想要做的是在父容器上添加一个事件并等待事件冒泡并确定事件是否来自你的 x 标记，如果它是然后触发回调函数。这是我认为大多数图书馆都使用的概念..

或者使用jQuery之类的库，为什么要解决别人已经解决的问题。