Question

我有一个简单的待办事项应用，并且想要在添加到ul

时单击删除按钮来删除任务

我将对象存储到数组中，然后使用自己的删除按钮创建一个li。我遇到的问题是，我不确定如何使删除按钮删除它所属的任务。

构建UL功能

function buildList(){
var item = document.getElementById('items')
item.classList = 'well well-sm';

var newLi = document.createElement('li');
//newLi.innerHTML = '';
newLi.className = 'list-group-item';

var buttons = document.createElement('container');
buttons.classList.add('buttons');

var remove = document.createElement('button');
remove.className = ' btn btn-danger btn-sm delete pull-right ';
remove.innerHTML = 'delete';


for(var i = 0; i < taskList.name.length; i++){
  var value = taskList.name[i];
  taskList.name[i].addEventListener('click', removeTask);



  newLi.innerHTML = value;
  buttons.appendChild(remove);
  newLi.appendChild(remove);
  item.appendChild(newLi);

}   
}

删除功能

function removeTask(value){
   this.parentNode.parentNode.removeChild(this.parentNode);
}

如果添加任务然后尝试删除任务，则应删除该任务。任何可以帮助我的人都会非常感激！

感谢。

这是一个JSFiddle：https://jsfiddle.net/DDjid/y25jdqxx/1/

Answer 1

只需将点击处理程序添加到按钮，如：

for(var i = 0; i < taskList.name.length; i++){
  var value = taskList.name[i];
  remove.addEventListener('click', removeItem);
}

并更新removeItem功能，如：

function removeItem(){
  this.parentNode.parentNode.removeChild(this.parentNode);
}

DEMO FIDDLE

单击对象上的删除删除任务

1 个答案: