プログラム学習室 http://studyhallweb.com/

Dart言語: HTML要素の追加と削除

Procrastinator's Todo


入力すると、リストが追加される
クリックすると、そのリストが消える
ボタンを押すと入力した全てのリストが消える

参考URL: https://www.dartlang.org/docs/tutorials/remove-elements/

Dartのソース
import 'dart:html';

InputElement toDoInput;
UListElement toDoList;
ButtonElement btnClear;

void main() {
  toDoInput = querySelector('#to-do-input');
  toDoList = querySelector('#to-do-list');
  btnClear = querySelector('#clear-list');
  toDoInput.onChange.listen(addToDoItem);
  btnClear.onClick.listen((e) => toDoList.children.clear());  // ボタンが押されたとき
}

void addToDoItem(Event e) {
  var newToDo = new LIElement();
  newToDo.text = toDoInput.value;
  newToDo.onClick.listen((e) => newToDo.remove());  // リストがクリックされたとき、その要素を消す
  toDoInput.value=' ';
  toDoList.children.add(newToDo);
}
             
上記URLのソースでは query()を使用している(2014/01/19現在)が、querySelector()に修正