添加删除项按钮 - 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 = '';
}

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

Add delete item button - ToDo App - Dart

dart