Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(396)

Side by Side Diff: src/site/docs/tutorials/remove-elements/index.markdown

Issue 26542002: edit pass on T3,4,5, updated images (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: Created 7 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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 ![Use element.remove() to remove an element from the DOM](images/remove-element. png) 129 ![Use element.remove() to remove an element from the DOM](images/remove-element. png)
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 ![Registering an event handler to delete an item](images/remove-element-code.png ) 140 ![Registering an event handler to delete an item](images/remove-element-code.png )
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
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 %}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698