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

Question

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

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>

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