Contents

Remove DOM elements

What’s the point?

  • 使用元素 .remove()从DOM中删除一个元素.
  • 元素 .children.clear元素删除所有儿童().
  • 函数表达式是定义一次性函数的便捷方法.
  • =>是用于定义仅包含一个表达式的函数的简写语法.

本教程向您展示如何从DOM中删除元素. 现在,上一教程中的todo应用程序有了新的改进版本,允许用户一次或一次删除列表中的项目.

Try the app

以下是上一教程中todo应用程序的修订版,允许您删除项目. 停止拖延,并从待办事项列表中删除项目.

尝试一下! 单击运行以启动该Web应用程序. 然后在应用程序的输入字段中键入内容,然后按回车键; 一个新项目出现在列表中. 输入更多项目. 将鼠标光标指向列表中的一项; 该项目变为红色并变大. 单击它,它从列表中消失. 使用全部删除按钮可一次删除列表中的所有项目.

其余部分描述了添加到本教程的todo应用程序中的代码的关键方面. 具体来说,他们着眼于从DOM中删除一个或多个元素的Dart代码以及使文本变红和变大的CSS代码.

Changing the appearance when cursor is over an element

如您所见,列表中的一项变为红色,并且当用户指向它时会变大. 鼠标光标也会改变形状. 这些视觉提示在此示例中是用户界面的重要组成部分,因为它们是向用户指示单击该项目时将发生某些事情的唯一指示.

此行为使用以下规则在todo_with_delete应用程序的CSS文件中编码:

#to-do-list li:hover {
  color: red;
  font-size: 18px;
  cursor:pointer;
}

我们使用此CSS技巧而不是提供熟悉的用户界面(例如上面带有" X"的按钮)来简化代码.

Removing an element from the DOM tree

将元素从其父级的子级列表中删除后,该元素将从DOM中删除. List类提供用于在列表中查找并将其删除的功能. 但是,在这种情况下,使用元素的remove()函数比使用List类中的函数更短,更简洁.

Use element.remove() to remove an element from the DOM

在todo_with_delete应用程序中,用户单击一个项目将其删除. 这是通过一行Dart代码实现的. 创建新的待办事项后,代码会在新元素上注册一个鼠标单击处理程序. 当用户单击该新元素时,其事件处理程序将使该元素使用remove()从DOM中将其自身删除.

Registering an event handler to delete an item

当元素将自己从DOM中删除时,浏览器将重新呈现该页面,并且该项目将从"待办事项"列表中消失.

Removing all child elements from an element

当用户单击" 全部删除"按钮时,所有元素将从列表中删除.

Use element.children.clear() to remove all of an element's children

在这种情况下,使用List类的clear()函数将产生最简洁的代码. 这是来自todo_with_delete应用程序的代码,该代码实现了Delete All按钮.

  1. HTML代码创建一个ID为delete-all的按钮. (CSS对其进行样式设置.)

    <button id="delete-all" type="button" style="float:right"> Delete All </button>
  2. Dart代码使用querySelector()和按钮的ID#delete-all从DOM中获取按钮元素. 该代码在按钮上注册了一个鼠标单击处理程序. 处理程序将从待办事项列表中删除所有子元素. 这是与" 全部删除"按钮相关的所有 Dart代码.

    Remove all child elements from an Element

About function expressions and =>

将事件侦听器添加到" 全部删除"按钮时,todo_with_delete应用程序使用一些有趣的Dart语法. 传递给listen()函数的参数是函数表达式的示例,这是定义函数的一种简便方法,它使用=>语法简洁地定义函数.

A one-line function definition

等效于编写此代码:

deleteAll.onClick.listen((e) {
  toDoList.children.clear();
});

甚至这个:

...
void main() {
  ...
  deleteAll.onClick.listen(deleteAllElements);
}

void deleteAllElements(Event e) {
  toDoList.children.clear();
}
...

在元素上注册事件处理程序时,通常使用函数表达式,并且函数表达式可以跨越多行. 注册事件处理程序时,该函数必须是EventListener. 也就是说,它不返回任何值,并且将Event对象作为参数.

What next?

可以使用现有的Web编程框架来代替使用低级API来实现Web应用程序. 有关更多信息,请参见Web库概述 .

by  ICOPY.SITE