[week1] TodoList Delete 구현

src/js/TodoApp.js

@@ -35,6 +35,7 @@ export default function TodoApp($app) {
     $app,
     initialState: this.state.todoes,
     onToggle: (idx) => toggleTodo(idx),
+    onDelete: (idx) => deleteTodo(idx),
   });
   const todoCount = new TodoCount({
     $app,
@@ -51,7 +52,6 @@ export default function TodoApp($app) {
   const addTodo = (contents) => {
     const todos = this.state.todoes;
     const nextIdx = Math.max(0, ...todos.map((todo) => todo.idx)) + 1;
-    console.log('next', nextIdx);
     const newTodo = {
       idx: nextIdx,
       content: contents,
@@ -69,12 +69,23 @@ export default function TodoApp($app) {
     const todos = this.state.todoes;
 
     todos.map((todo) => {
-      if (todo.idx === parseInt(idx)) {
+      if (todo.idx === idx) {
         todo.state = todo.state === '' ? 'complete' : '';
       }
     });
     this.setState({
       ...this.state,
     });
   };
+
+  const deleteTodo = (idx) => {
+    const todos = this.state.todoes;
+    const newTodos = todos.filter((todo) => {
+      return todo.idx !== idx;
+    });
+
+    this.setState({
+      todoes: newTodos,
+    });
+  };
 }

src/js/TodoList.js

@@ -1,4 +1,4 @@
-export default function TodoList({ $app, initialState, onToggle }) {
+export default function TodoList({ $app, initialState, onToggle, onDelete }) {
   //렌더링할 DOM 생성
 
   this.state = initialState;
@@ -15,22 +15,29 @@ export default function TodoList({ $app, initialState, onToggle }) {
 
   this.$target.addEventListener('click', (e) => {
     const $node = e.target;
-    const { nodeId } = $node.dataset;
-    if (nodeId) {
-      this.toggleTodoItem(nodeId);
+    const $viewnode = e.target.closest('.view');
+    const { nodeId } = $viewnode.dataset;
+
+    if ($node.className == 'toggle') {
+      this.toggleTodoItem(parseInt(nodeId));
+    }
+    if ($node.className == 'destroy') {
+      this.deleteTodoItem(parseInt(nodeId));
     }
   });
   this.toggleTodoItem = (nodeId) => {
     onToggle(nodeId);
   };
-
+  this.deleteTodoItem = (nodeId) => {
+    onDelete(nodeId);
+  };
   this.render = () => {
     const todoTemplate = `${this.state
       .map(
         (todo, idx) =>
-          `<li class="${todo.state === 'complete' ? 'completed' : ''}">
-          <div class="view">
-            <input class="toggle" type="checkbox" data-node-id=${todo.idx} />
+          `<li  class="${todo.state === 'complete' ? 'completed' : ''}">
+          <div class="view" data-node-id=${todo.idx} >
+            <input class="toggle" type="checkbox" />
             <label class="label">${todo.content}</label>
             <button class="destroy"></button>
           </div>