添加删除项目按钮 - ToDo App - Dart

Question

我很擅长飞镖，所以不要评判我。 :)）

我刚开始在Dart中编写一个简单的ToDo应用程序。我想在项目中添加一个按钮，所以我可以从列表中删除它。我成功添加了按钮，但没有让点击事件有效。

我知道为什么代码不起作用，但不知道，解决这个问题的最佳解决方案是什么。

一些改进会很棒。

提前致谢 罗恩

my little sexy dartpad

Answer 1

您需要注册onClick听取删除每个按钮上的当前项目。这是您的代码的工作版本。

import 'dart:html';

InputElement toDoInput;
UListElement toDoList;

void main() {
  toDoInput = querySelector('#to-do-input');
  toDoList = querySelector('#to-do-list');

  toDoInput.onChange.listen(addToDoItem);
}

// Add item to list
void addToDoItem(Event e) {
  final toDoItem = new LIElement();
  toDoItem.text = toDoInput.value;

  final deleteItemButton = new ButtonElement()
    ..text = 'Delete'
    ..onClick.listen((_) => toDoItem.remove());

  toDoItem.children.add(deleteItemButton);
  toDoList.children.add(toDoItem);

  toDoInput.value = '';
}