| 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 | 21 |
| 22 {% endcapture %} | 22 {% endcapture %} |
| 23 | 23 |
| 24 {% capture sample_links %} | 24 {% capture sample_links %} |
| 25 | 25 |
| 26 <p> This tutorial features this example:</p> |
| 27 * todo_with_delete |
| 28 |
| 26 <p> | 29 <p> |
| 27 Get the source code for the sample featured in this tutorial:</p> | 30 Don't have the source code? |
| 28 | 31 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> |
| 29 <ul> | 32 Download it. |
| 30 <li> | 33 </a> |
| 31 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/remove-elements/todo_with_delete" | |
| 32 target="_blank">todo_with_delete</a> | |
| 33 </li> | |
| 34 </ul> | |
| 35 | 34 |
| 36 {% endcapture %} | 35 {% endcapture %} |
| 37 | 36 |
| 38 {% capture content %} | 37 {% capture content %} |
| 39 | 38 |
| 40 <div class="tute-target-title"> | 39 <div class="tute-target-title"> |
| 41 <h1>{{page.title}}</h1> | 40 <h1>{{page.title}}</h1> |
| 42 <h3>Dynamically delete items from the browser page.</h3> | 41 <h3>Dynamically delete items from the browser page.</h3> |
| 43 </div> | 42 </div> |
| 44 | 43 |
| (...skipping 26 matching lines...) Expand all Loading... |
| 71 the item turns red and gets slightly larger. | 70 the item turns red and gets slightly larger. |
| 72 Click it and it disappears from the list. | 71 Click it and it disappears from the list. |
| 73 Use the **Delete All** button | 72 Use the **Delete All** button |
| 74 to remove all of the items in the list at once. | 73 to remove all of the items in the list at once. |
| 75 | 74 |
| 76 <iframe class="running-app-frame" | 75 <iframe class="running-app-frame" |
| 77 style="height:250px;width:300px;" | 76 style="height:250px;width:300px;" |
| 78 src="examples/todo_with_delete/todo_with_delete.html"> | 77 src="examples/todo_with_delete/todo_with_delete.html"> |
| 79 </iframe> | 78 </iframe> |
| 80 | 79 |
| 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/rem
ove-elements/todo_with_delete" | |
| 83 target="_blank">todo_with_delete</a>. | |
| 84 | |
| 85 The remaining sections describe | 80 The remaining sections describe |
| 86 key aspects of the code | 81 key aspects of the code |
| 87 added to the todo app for this tutorial. | 82 added to the todo app for this tutorial. |
| 88 Specifically, they look at | 83 Specifically, they look at |
| 89 the Dart code that removes one or more elements from the DOM | 84 the Dart code that removes one or more elements from the DOM |
| 90 and the CSS code that makes the text red and larger. | 85 and the CSS code that makes the text red and larger. |
| 91 | 86 |
| 92 ##Changing the appearance when cursor is over an element {#css-hover} | 87 ##Changing the appearance when cursor is over an element {#css-hover} |
| 93 | 88 |
| 94 As you saw, an item in the list turns red and gets bigger | 89 As you saw, an item in the list turns red and gets bigger |
| (...skipping 155 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 250 | 245 |
| 251 * One of those packages is Polymer.dart, | 246 * One of those packages is Polymer.dart, |
| 252 which makes manipulating the DOM even easier | 247 which makes manipulating the DOM even easier |
| 253 with data binding, templates, and declarative event handlers. | 248 with data binding, templates, and declarative event handlers. |
| 254 Check out [Define a Custom Element](/docs/tutorials/polymer-intro) | 249 Check out [Define a Custom Element](/docs/tutorials/polymer-intro) |
| 255 for an introduction to Polymer. | 250 for an introduction to Polymer. |
| 256 | 251 |
| 257 {% endcapture %} | 252 {% endcapture %} |
| 258 | 253 |
| 259 {% include tutorial.html %} | 254 {% include tutorial.html %} |
| OLD | NEW |