4. Remove DOM Elements

* 전체 링크

- 1.get started

- 2. Connect Dart & HTML

- 3. Add Elements to the DOM

- 4, Remove DOM Elements

- 5. Install Shared Packages

- 6. Define a Custom Element

- 7. Use Future-Based APIS

- 8. Use Streams for Data

- 9. Fetch Data Dynamically

- 10. Get Input from a Form

- 11. Use Indexed DB

- 12. Write Command-line Apps

---

Remove DOM Elements
DOM 요소 제거하기

Dynamically delete items from the browser page.
브라우저 페이지에서 동적으로 아이템 제거하기.

This tutorial shows you how to delete elements from the DOM. A new and improved version of the todo app from the previous tutorial now allows the user to delete items from the list either one at a time, or all at once.

이번 튜토리얼에서는 DOM에서 요소를 어떻게 제거하는지 보여줍니다. 이전 튜토리얼보다 새롭고 개선된 todo 앱 버전은  사용자가  리스트에 한 번에 한개씩, 또는 한번에 모두를 지울 수 있도록 합니다.

• Try the app

• 앱 실행해 보기

• Changing the appearance when cursor is over an element

• 커서가 요소 위에 왔을때 화면의 변화

• Removing an element from the DOM tree

• DOM 트리 에서 요소 지우기

• Removing all child elements from an element

• 요소에 딸려 있는 모두 자식 요소 지우기

• About function expressions and =>

• 함수 표현 방법과 => 에 대해서

• Other resources

• 다른 자원들

• What next?

• 다음은?

Try the app
앱 실행하기.

Below is a revised version of the todo app from the previous tutorial that allows you to delete items. Stop procrastinating and remove items from your to do list.

아래에는(https://www.dartlang.org/docs/tutorials/remove-elements/  원본 주소 가야 앱을 실행해 볼 수 있다.) 사용자가 아이템을 지울 수 있는, 이전 버전보다 좀 더 진보된 버전 todo 앱이다.

Try it! Type in the input field and press the return key; a new item appears in the list. 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 to remove all of the items in the list at once.

시도해 보세요. input 필드에 할일을 적고 엔터키를 치세요. 새로운 아이템이 리스트에 추가됩니다. 몇개의 아이템을 더 넣으세요. 리스트의 아이템중에 한개에 마우스 포인터를 갖다 놓아보세요. 그러면 아이템은 빨간색으로 변하고 좀 더 크게 변합니다. 이제 마우스를 클릭해보세요. 그러면 리스트에서 해당 항목이 사라집니다. 한번에 리스트 목록에 있는 모든 항목을 지우려면 delete All 버튼을 사용하세요.

The remaining sections describe key aspects of the code 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.

남아 있는 섹션은 이번 튜토리얼에 todo 앱에 추가 된 코드의 핵심적인 측면을 설명합니다. 특히, DOM에서 하나 또는 하나 이상의 요소를 삭제하는 Dart 코드와 텍스트를 빨간색으로 만들고 더 크게 만드는 Dart 코드를 보여줍니다.

Changing the appearance when cursor is over an element
커서가 요소위에 왔을때 모양 바꾸기.

As you saw, an item in the list turns red and gets bigger when the user points at it. The mouse cursor also changes shape. These visual clues are an important part of the user interface in this example because they are the only indication to the user that something will happen when the item is clicked.

앞에서 봤듯이, 사용자가 마우스를 항목위에 갔다댔을때 리스트에 있는 아이템이 빨간색으로 변하고 더 커집니다. 또한 마우스 커서의 모양도 변합니다. 이러한 시각적 힌트는 사용자 인터페이스에 중요한 부분입니다.왜냐하면 사용자가 아이템이 클릭되어졌을때 어떤 일이 일어날 것이라는 알려주기 때문입니다.

This behavior is coded in the todo_with_delete app’s CSS file with this rule:

이런 모습(동작)은 todo_with_delete 앱의 CSS 파일안에 코딩되어 있습니다.

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

We’ve used this CSS trick instead of providing a familiar user interface, such as a button with an ‘X’ on it, to keep the code simpler.

우리는 X 버튼과 같은 삭제 버튼을 두는 비슷한 사용자 인터페이스를 사용하는 대신에 CSS 트릭을 사용했습니다. 코드도 간단합니다.

Removing an element from the DOM tree
DOM 트리에서 요소 제거하기.

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 and removing it. But, in this case, using the element’s remove() function is shorter and more concise than using functions from the List class.

요소는 부모의 리스트에서 제거되어 질때 DOM에서 삭제처리 됩니다. List 클래스는 리스트에서 아이템을 찾고 제거하는 기능을 제공합니다. 그러나 이번 케이스에서는, 요소의 remove() 함수를 사용하는 것이 List 클래스의 함수를 사용하는 것보다 더 짧고 더 간결합니다.

In the todo_with_delete app, 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. When the user clicks that new element, its event handler causes the element to remove itself from the DOM with remove().

When the element removes itself from the DOM, the browser re-renders the page, and the item disappears from the to do list.

요소가 DOM에서 삭제될때 브라우저는 페이지를 다시 랜더링합니다. 그리고 할일 목록에서 그 아이템을 사라집니다.

Removing all child elements from an element
요소에서 모든 자식 요소 삭제하기.

When the user clicks the Delete All button, all elements are removed from the list.
사용자가 Delete All 버튼을 클릭하면, 모든 요소는 리스트에서 삭제 됩니다.

In this case, using the List class’s clear() function yields the most concise code. Here’s the code from the todo_with_delete app that implements the Delete All button.

이 경우에, List 클래스의 clear() 함수를 사용하는것이 가장 간결한 코드를 산출하는 것입니다. 여기에 Delete All 버튼을 구현하는 todo_with_delte 앱 코드가 있습니다.

1. The HTML code creates a button with the ID delete-all. (The CSS styles it.)
   HTML 코드는 ID가 delete-all 인 버튼을 만듭니다.(CSS 스타일도 적용되어 있음)

2. <button id="delete-all" type="button" style="float:right"> Delete All </button>

3. The Dart code gets the button element from the DOM using querySelector() and the button’s ID, #delete-all. The code registers a mouse click handler on the button; the handler removes all of the child elements from the to do list. Here is all of the Dart code related to the Delete All button.
   Dart 코드는 querySelector()을 이용해서 DOM에서 버튼 요소를 가지고 옵니다. 코드는 버튼에 마우스 클릭 이벤트 핸들러를 등록합니다. 이벤트 핸들러는 할일 목록에서 모든 자식 요소를 삭제합니다. 아래에 Delete All 버튼과 관련된 모든 Dart 코드가 있습니다.

About function expressions and =>
함수의 기능과 =>에 대해서.

The todo_with_delete app uses some interesting Dart syntax when adding an event listener to the Delete All button. The argument passed into the listen() function is an example of afunction expression, which is a shorthand way of defining functions and it uses the => syntax to define the function concisely.

todo_with_delete 앱은 Delete All 버튼에 이벤트 리슨너를 추가할때 쫌 흥미로운 Dart 문법을 사용합니다. listen() 함수에 전달된 인자는 함수 표현의 한 종류입니다. 그것은 함수를 정의하는 속기 방법(축약된 방법) 입니다. 함수를 간결하게 표현하기 위해서 => 문법을 사용합니다.

It is equivalent to writing this:
아래에 작성된 코드와 동일합니다.

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

or even this:
또는 이것과도 동일합니다.

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

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

Function expressions are often used when registering event handlers on an element and can extend over multiple lines. When registering event handlers, the function must be an EventListener. That is, it returns no value and takes an Event object as a parameter.

함수 표현식은 요소에 이벤트 핸들러를 등록하고 여러 라인으로 확장할때 주로 쓰여집니다. 이벤트 핸들러를 등록할때 함수는 반드시 EventListener 이어야 합니다. 즉, 리턴값이 없어야 하고 파라미터로 Event 객체를 받아야 합니다.

Other resources

• You can find more information about the DOM and CSS in Dart: Up and Running, which also provides thorough coverage of the Dart language, libraries, and tools.

What next?

• The next tutorial, Install Shared Packages, 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 for an introduction to Polymer.

• 이러한 팩키지 중에 하나는 Polymer.dart 가 있습니다. 이 Polymer.dart 는  DOM에 좀 더 쉽게 데이터 바인딩을 하고 템플릿화 하고 명백한 이벤트 핸들러를 조작하게 해줍니다. Polymer 대한 소개는 Define a Custom Element를 보세요.