# 12. Todo - Remove

## 목표

선택된 Todo 를 삭제합니다.

### 실습

추가된 todo 에 마우스를 올려보시면 x 버튼을 확인 할 수 있습니다.\
이 버튼이 눌렸을 경우 해당 todo 를 삭제해야합니다.

![](/files/-LixHediQJ6qOnRS7Gk6)

삭제를 하기 위해서는 한가지 알아야되는 정보가 있는데 해당 todo 의 고유한 구분 값 입니다.\
우리는 그 구분값을 만들어주기 위해 date 를 이용했습니다.

각 todo 에는 고유한 id 값을 가지고 있고 해당 todo 가 선택되었을 경우 그 값을 이용하여 삭제를 합니다.

Create 와 마찬가지로 모든 리스트 데이터를 가지고 있는 App.vue 에 함수를 추가합니다.

remove 함수는 매우 심플합니다. 선택된 id 를 받아 그 id 와 같지 않은 todo 들만 filter 해주면됩니다.

```javascript
// App.vue

methods: {
    insertTodo(text) {
      // ...
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id);
    }
  }
```

removeTodo 의 경우 리스트를 그려주는 `Todo.vue` 에서 이용하고자 합니다.

```javascript
// App.vue

<template>
  <div id="app">
    <section class="todoapp">
      <Header @insertTodo="insertTodo" />
      <Todo :todos="todos" @removeTodo="removeTodo" />
      <Footer />
    </section>
  </div>
</template>
```

Todo.vue 에서는 해당 이벤트를 이용하여 선택된 id 값만 넘겨주면됩니다.

클릭된 id 값을 받아 emit 해줄 handleRemove 함수를 추가하겠습니다.

```javascript
// Todo.vue

export default {
  props: {
    todos: { type: Array, default: () => [] }
  },
  methods: {
    handleRemove(id) {
      this.$emit("removeTodo", id);
    }
  }
};
```

x 버튼이 눌렸을때 눌린 todo 의 id 를 handleRemove 에게 넘겨 줄 수 있도록 click event 를 걸어줍니다.

```javascript
<template>
  <section class="main">
    <ul class="todo-list">
      <li
        :class="{todo: true, completed: isDone }"
        v-for="({ id, text, isDone }) in todos"
        :key="id"
      >
        <div class="view">
          <input class="toggle" type="checkbox" :checked="isDone" />
          <label>{{ text }}</label>
          <button class="destroy" @click="handleRemove(id)"></button>
        </div>
        <input class="edit" type="text" />
      </li>
    </ul>
  </section>
</template>
```

선택된 todo 가 삭제되는 것을 확인 할 수 있습니다.

![](/files/-LixKueugWwPacpa1LK9)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simplevue.gitbook.io/intro/12.-todo-remove.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.