Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Remove DOM Elements" | 3 title: "Remove DOM Elements" |
| 4 description: "Remove a child element from the DOM" | 4 description: "Remove a child element from the DOM" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: remove-elements | 7 id: remove-elements |
| 8 next: shared-pkgs/ | 8 next: shared-pkgs/ |
| 9 next-title: "Install Shared Packages" | 9 next-title: "Install Shared Packages" |
| 10 prev: add-elements/ | 10 prev: add-elements/ |
| 11 prev-title: "Add Elements to the DOM" | 11 prev-title: "Add Elements to the DOM" |
| 12 --- | 12 --- |
| 13 | 13 |
| 14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
| 15 | 15 |
| 16 * Use _element_.remove() to remove an element from the DOM. | 16 * Use _element_.remove() to remove an element from the DOM. |
| 17 * Remove all children from an element with _element_.children.clear(). | 17 * Remove all children from an element with _element_.children.clear(). |
| 18 * Function expressions are a convenient way to define single-use functions. | 18 * Function expressions are a convenient way to define single-use functions. |
| 19 * => is a shorthand syntax for defining functions that contain just one | 19 * => is a shorthand syntax for defining functions that contain just one |
| 20 expression. | 20 expression. |
| 21 * dart:html defines many event-related classes. | |
| 22 | 21 |
| 23 {% endcapture %} | 22 {% endcapture %} |
| 24 | 23 |
| 25 {% capture sample_links %} | 24 {% capture sample_links %} |
| 26 | 25 |
| 27 <p> | 26 <p> |
| 28 Get the source code for the sample featured in this target:</p> | 27 Get the source code for the sample featured in this tutorial:</p> |
| 29 | 28 |
| 30 <ul> | 29 <ul> |
| 31 <li> | 30 <li> |
| 32 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /target04/todo_with_delete" | 31 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web /remove-elements/todo_with_delete" |
| 33 target="_blank">todo_with_delete</a> | 32 target="_blank">todo_with_delete</a> |
| 34 </li> | 33 </li> |
| 35 </ul> | 34 </ul> |
| 36 | 35 |
| 37 {% endcapture %} | 36 {% endcapture %} |
| 38 | 37 |
| 39 {% capture content %} | 38 {% capture content %} |
| 40 | 39 |
| 41 <div class="tute-target-title"> | 40 <div class="tute-target-title"> |
| 42 <h1>{{page.title}}</h1> | 41 <h1>{{page.title}}</h1> |
| 43 <h3>Dynamically delete items from the browser page.</h3> | 42 <h3>Dynamically delete items from the browser page.</h3> |
| 44 </div> | 43 </div> |
| 45 | 44 |
| 46 This target shows you how to delete elements from the DOM. | 45 This tutorial shows you how to delete elements from the DOM. |
| 47 A new and improved version of the todo app from | 46 A new and improved version of the todo app from |
| 48 [the previous target](/docs/tutorials/add-elements/) | 47 [the previous tutorial](/docs/tutorials/add-elements/) |
| 49 now allows the user to delete items from the list | 48 now allows the user to delete items from the list |
| 50 either one at a time, or all at once. | 49 either one at a time, or all at once. |
| 51 | 50 |
| 52 * [Try the app](#try-app) | 51 * [Try the app](#try-app) |
| 53 * [Changing the appearance when cursor is over an element](#css-hover) | 52 * [Changing the appearance when cursor is over an element](#css-hover) |
| 54 * [Removing an element from the DOM tree](#remove-elem) | 53 * [Removing an element from the DOM tree](#remove-elem) |
| 55 * [Removing all child elements from an element](#remove-all-elem) | 54 * [Removing all child elements from an element](#remove-all-elem) |
| 56 * [About function expressions and =>](#about-function-expressions) | 55 * [About function expressions and =>](#about-function-expressions) |
| 57 * [Other resources](#other-resources) | 56 * [Other resources](#other-resources) |
| 57 * [What next?](#what-next) | |
| 58 | 58 |
| 59 ##Try the app {#try-app} | 59 ##Try the app {#try-app} |
| 60 | 60 |
| 61 Below is a revised version | 61 Below is a revised version |
| 62 of the todo app from the previous target | 62 of the todo app from the previous tutorial |
| 63 that allows you to delete items. | 63 that allows you to delete items. |
| 64 Stop procrastinating and remove items from your todo list. | 64 Stop procrastinating and remove items from your to do list. |
| 65 | 65 |
| 66 **Try it!** | 66 **Try it!** |
| 67 Type in the input field and press the return key; | 67 Type in the input field and press the return key; |
| 68 a new item appears in the list. | 68 a new item appears in the list. |
| 69 Enter a few more items. | 69 Enter a few more items. |
| 70 Point the mouse cursor at one of the items in the list; | 70 Point the mouse cursor at one of the items in the list; |
| 71 the item turns red and gets slightly larger. | 71 the item turns red and gets slightly larger. |
| 72 Click it and it disappears from the list. | 72 Click it and it disappears from the list. |
| 73 Use the **Delete All** button in the lower right corner of the app | 73 Use the **Delete All** button in the lower right corner of the app |
| 74 to remove all of the items in the list at once. | 74 to remove all of the items in the list at once. |
| 75 | 75 |
| 76 <iframe class="running-app-frame" | 76 <iframe class="running-app-frame" |
| 77 style="height:250px;width:300px;" | 77 style="height:250px;width:300px;" |
| 78 src="http://dart-lang.github.io/dart-tutorials-samples/web/target04/todo _with_delete/web/todo_with_delete.html"> | 78 src="examples/todo_with_delete/todo_with_delete.html"> |
| 79 </iframe> | 79 </iframe> |
| 80 | 80 |
| 81 You can find the complete source code for this sample on github at | 81 You can find the complete source code for this sample on github at |
| 82 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar get04/todo_with_delete" | 82 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/rem ove-elements/todo_with_delete" |
| 83 target="_blank">todo_with_delete</a>. | 83 target="_blank">todo_with_delete</a>. |
| 84 | 84 |
| 85 The remaining sections describe | 85 The remaining sections describe |
| 86 key aspects of the code | 86 key aspects of the code |
| 87 added to the todo app for this target. | 87 added to the todo app for this tutorial. |
| 88 Specifically, they look at | 88 Specifically, they look at |
| 89 the Dart code that removes one or more elements from the DOM | 89 the Dart code that removes one or more elements from the DOM |
| 90 and the CSS code that makes the text red and larger. | 90 and the CSS code that makes the text red and larger. |
| 91 | 91 |
| 92 ##Changing the appearance when cursor is over an element {#css-hover} | 92 ##Changing the appearance when cursor is over an element {#css-hover} |
| 93 | 93 |
| 94 As you saw, an item in the list turns red and gets bigger | 94 As you saw, an item in the list turns red and gets bigger |
| 95 when the user points at it. | 95 when the user points at it. |
| 96 The mouse cursor also changes shape. | 96 The mouse cursor also changes shape. |
| 97 These visual clues are an important part of the user interface | 97 These visual clues are an important part of the user interface |
| (...skipping 12 matching lines...) Expand all Loading... | |
| 110 | 110 |
| 111 We've used this CSS trick | 111 We've used this CSS trick |
| 112 instead of providing a familiar user interface, | 112 instead of providing a familiar user interface, |
| 113 such as a button with an 'X' on it, | 113 such as a button with an 'X' on it, |
| 114 to keep the code simpler. | 114 to keep the code simpler. |
| 115 | 115 |
| 116 ##Removing an element from the DOM tree {#remove-elem} | 116 ##Removing an element from the DOM tree {#remove-elem} |
| 117 | 117 |
| 118 An element is removed from | 118 An element is removed from |
| 119 the DOM when it is removed from its parent's list of children. | 119 the DOM when it is removed from its parent's list of children. |
| 120 The List class provides functions for finding an item in the list | 120 The |
| 121 <a href="https://api.dartlang.org/dart_core/List.html" target="_blank">List</a> | |
| 122 class provides functions for finding an item in the list | |
| 121 and removing it. | 123 and removing it. |
| 122 But, in this case, | 124 But, in this case, |
| 123 using the element's remove() function | 125 using the element's remove() function |
| 124 is shorter and more concise than | 126 is shorter and more concise than |
| 125 using functions from the List class. | 127 using functions from the List class. |
| 126 | 128 |
| 127  | 129  |
| 128 | 130 |
| 129 In the todo_with_delete app, | 131 In the todo_with_delete app, |
| 130 the user clicks an item to delete it. | 132 the user clicks an item to delete it. |
| 131 This is achieved with one line of Dart code. | 133 This is achieved with one line of Dart code. |
| 132 When a new to do item is created, | 134 When a new to do item is created, |
| 133 the code registers a mouse click handler on the new element. | 135 the code registers a mouse click handler on the new element. |
| 134 The event handler causes the element to remove itself from the DOM | 136 When the user clicks that new element, |
| 137 its event handler causes the element to remove itself from the DOM | |
| 135 with remove(). | 138 with remove(). |
| 136 | 139 |
| 137  | 140  |
| 138 | 141 |
| 139 When the element removes itself from the DOM, | 142 When the element removes itself from the DOM, |
| 140 the browser re-renders the page, | 143 the browser re-renders the page, |
| 141 and the item disappears from the to do list. | 144 and the item disappears from the to do list. |
| 142 | 145 |
| 143 ##Removing all child elements from an element {#remove-all-elem} | 146 ##Removing all child elements from an element {#remove-all-elem} |
| 144 | 147 |
| (...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 226 <a href="/docs/cookbook/"> | 229 <a href="/docs/cookbook/"> |
| 227 <i class="icon-food"> </i> Dart Cookbook</a>, | 230 <i class="icon-food"> </i> Dart Cookbook</a>, |
| 228 where you'll find many recipes about manipulating the DOM | 231 where you'll find many recipes about manipulating the DOM |
| 229 and using CSS. | 232 and using CSS. |
| 230 The cookbook also has recipes about basic Dart data types, | 233 The cookbook also has recipes about basic Dart data types, |
| 231 such strings, lists, maps, and numbers. | 234 such strings, lists, maps, and numbers. |
| 232 </li> | 235 </li> |
| 233 | 236 |
| 234 <li> | 237 <li> |
| 235 You can find more information about the DOM and CSS in | 238 You can find more information about the DOM and CSS in |
| 236 <a href="/docs/dart-up-and-running/">Dart Up and Running</a>, | 239 <a href="/docs/dart-up-and-running/">Dart Up and Running</a>, |
|
Kathy Walrath
2013/10/08 21:25:22
Dart Up -> Dart: Up
mem
2013/10/09 17:07:31
Done.
| |
| 237 which also provides thorough coverage of the Dart language, | 240 which also provides thorough coverage of the Dart language, |
| 238 libraries, and tools. | 241 libraries, and tools. |
| 239 </li> | 242 </li> |
| 240 </ul> | 243 </ul> |
| 241 | 244 |
| 245 ##What next? {#what-next} | |
| 246 | |
| 247 * The next tutorial, | |
| 248 [Install Shared Packages](/docs/tutorials/shared-pkgs), | |
| 249 shows you how to use code written and shared by others | |
|
Kathy Walrath
2013/10/08 21:25:22
others -> others.
mem
2013/10/09 17:07:31
Done.
| |
| 250 | |
| 251 * One of those packages is Polymer.dart, | |
| 252 which makes manipulating the DOM even easier | |
| 253 with data binding, templates, and declarative event handlers. | |
| 254 Check out [Define a Custom Element](/docs/tutorials/polymer-intro) | |
| 255 for an introduction to Polymer. | |
| 256 | |
| 242 {% endcapture %} | 257 {% endcapture %} |
| 243 | 258 |
| 244 {% include tutorial.html %} | 259 {% include tutorial.html %} |
| OLD | NEW |