| Index: src/site/docs/tutorials/remove-elements/index.markdown
|
| diff --git a/src/site/docs/tutorials/remove-elements/index.markdown b/src/site/docs/tutorials/remove-elements/index.markdown
|
| index dd949c4e108f598c954425fe35a160da81b92268..6852d2c665a055d1b80fec9a8ab4741a0526f96f 100644
|
| --- a/src/site/docs/tutorials/remove-elements/index.markdown
|
| +++ b/src/site/docs/tutorials/remove-elements/index.markdown
|
| @@ -18,18 +18,17 @@ prev-title: "Add Elements to the DOM"
|
| * Function expressions are a convenient way to define single-use functions.
|
| * => is a shorthand syntax for defining functions that contain just one
|
| expression.
|
| -* dart:html defines many event-related classes.
|
|
|
| {% endcapture %}
|
|
|
| {% capture sample_links %}
|
|
|
| <p>
|
| -Get the source code for the sample featured in this target:</p>
|
| +Get the source code for the sample featured in this tutorial:</p>
|
|
|
| <ul>
|
| <li>
|
| - <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target04/todo_with_delete"
|
| + <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/remove-elements/todo_with_delete"
|
| target="_blank">todo_with_delete</a>
|
| </li>
|
| </ul>
|
| @@ -43,9 +42,9 @@ Get the source code for the sample featured in this target:</p>
|
| <h3>Dynamically delete items from the browser page.</h3>
|
| </div>
|
|
|
| -This target shows you how to delete elements from the DOM.
|
| +This tutorial shows you how to delete elements from the DOM.
|
| A new and improved version of the todo app from
|
| -[the previous target](/docs/tutorials/add-elements/)
|
| +[the previous tutorial](/docs/tutorials/add-elements/)
|
| now allows the user to delete items from the list
|
| either one at a time, or all at once.
|
|
|
| @@ -55,13 +54,14 @@ either one at a time, or all at once.
|
| * [Removing all child elements from an element](#remove-all-elem)
|
| * [About function expressions and =>](#about-function-expressions)
|
| * [Other resources](#other-resources)
|
| +* [What next?](#what-next)
|
|
|
| ##Try the app {#try-app}
|
|
|
| Below is a revised version
|
| -of the todo app from the previous target
|
| +of the todo app from the previous tutorial
|
| that allows you to delete items.
|
| -Stop procrastinating and remove items from your todo list.
|
| +Stop procrastinating and remove items from your to do list.
|
|
|
| **Try it!**
|
| Type in the input field and press the return key;
|
| @@ -70,21 +70,21 @@ Enter a few more items.
|
| Point the mouse cursor at one of the items in the list;
|
| the item turns red and gets slightly larger.
|
| Click it and it disappears from the list.
|
| -Use the **Delete All** button in the lower right corner of the app
|
| +Use the **Delete All** button
|
| to remove all of the items in the list at once.
|
|
|
| <iframe class="running-app-frame"
|
| style="height:250px;width:300px;"
|
| - src="http://dart-lang.github.io/dart-tutorials-samples/web/target04/todo_with_delete/web/todo_with_delete.html">
|
| + src="examples/todo_with_delete/todo_with_delete.html">
|
| </iframe>
|
|
|
| You can find the complete source code for this sample on github at
|
| -<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target04/todo_with_delete"
|
| +<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/remove-elements/todo_with_delete"
|
| target="_blank">todo_with_delete</a>.
|
|
|
| The remaining sections describe
|
| key aspects of the code
|
| -added to the todo app for this target.
|
| +added to the todo app for this tutorial.
|
| Specifically, they look at
|
| the Dart code that removes one or more elements from the DOM
|
| and the CSS code that makes the text red and larger.
|
| @@ -117,7 +117,9 @@ to keep the code simpler.
|
|
|
| An element is removed from
|
| the DOM when it is removed from its parent's list of children.
|
| -The List class provides functions for finding an item in the list
|
| +The
|
| +<a href="https://api.dartlang.org/dart_core/List.html" target="_blank">List</a>
|
| +class provides functions for finding an item in the list
|
| and removing it.
|
| But, in this case,
|
| using the element's remove() function
|
| @@ -131,7 +133,8 @@ the user clicks an item to delete it.
|
| This is achieved with one line of Dart code.
|
| When a new to do item is created,
|
| the code registers a mouse click handler on the new element.
|
| -The event handler causes the element to remove itself from the DOM
|
| +When the user clicks that new element,
|
| +its event handler causes the element to remove itself from the DOM
|
| with remove().
|
|
|
| 
|
| @@ -233,12 +236,24 @@ it returns no value and takes an Event object as a parameter.
|
|
|
| <li>
|
| You can find more information about the DOM and CSS in
|
| - <a href="/docs/dart-up-and-running/">Dart Up and Running</a>,
|
| + <a href="/docs/dart-up-and-running/">Dart: Up and Running</a>,
|
| which also provides thorough coverage of the Dart language,
|
| libraries, and tools.
|
| </li>
|
| </ul>
|
|
|
| +##What next? {#what-next}
|
| +
|
| +* The next tutorial,
|
| +[Install Shared Packages](/docs/tutorials/shared-pkgs),
|
| +shows you how to use code written and shared by others.
|
| +
|
| +* One of those packages is Polymer.dart,
|
| +which makes manipulating the DOM even easier
|
| +with data binding, templates, and declarative event handlers.
|
| +Check out [Define a Custom Element](/docs/tutorials/polymer-intro)
|
| +for an introduction to Polymer.
|
| +
|
| {% endcapture %}
|
|
|
| {% include tutorial.html %}
|
|
|