javascript - 如何在单击其子元素时删除 li

Question

我正在使用 javascript 动态创建 li，我想向动态创建的每个 li 元素添加一个关闭按钮，以便在单击关闭按钮时删除 li 元素。这是迄今为止我的代码:

   function addNew(){
    // get value from input field

    var taskName = document.getElementById('task-name').value;


    // innerHTML to be inserted inside li

    var fullText = taskName + '<span class = "close" onclick = 
   "addListener(this)">&times;</span>';


   // calling create function from Element object

   Element.createNew('li','className','tasks',0,fullText);
  }

  // remove function

   function addListener(e){
       e.parentNode.parentNode.removeChild(e.parentNode);
   }

问题是 remove 函数删除了最后一个 li，而不是单击的 li。

这是JSFiddle的问题。

Answer 1

将所有列表项存储在数组中。

//suppose your list items have a class name 'lists'
//create a global var 
var lis = document.getElementsByClassName('lists');

最初它是空的， 所以在你的 add 方法中(你将新的列表项附加到 ul 中， 将新列表项推送到列表数组中。

并在 addEvent(e) 方法中，循环列表数组中的每个元素

function addEvent(e){
for(var i=0; i<lists.length; i++){
if(lists[i] === e){
//remove the lists element by using lists[i] instead of e
// and remember to pop the lists[i] and resize the lists array
}
}