Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

우당탕탕 개발일지

To-Do List 만들기 3차 본문

Front-end/JavaScript

To-Do List 만들기 3차

YUDENG 2023. 4. 11. 18:43

4. Delete() 함수 만들기

할 일을 삭제하는 'x' 버튼을 눌렀을 때 동작하는 함수이다.

 

4-1. index 가져오기

버튼을 클릭하였을 경우, 해당하는 todo의 number을 매개변수 index로 받는다. 

 

4-2. ToDo 삭제하기 : filter 활용

filter 함수는 배열을 순회하며 조건에 맞는 원소들로 구성된 새로운 배열을 반환한다.

기존 ToDos의 배열을 모두 순회하며 index와 다른 number로 구성된 todo들을 배열에 저장한 뒤 ToDos에 저장한다.

 

4-3. View 재설정

ToDos가 재구성 되었으므로 Loading 함수를 호출한다.

 

function Delete (index) {
    //1. index 가져오기
    //2. ToDo 삭제하기
    ToDos = ToDos.filter((todo) => todo.number != index);

    //3. View 재설정
    Loading();
    alert('삭제되었습니다');
}

 

728x90

'Front-end > JavaScript' 카테고리의 다른 글

비동기 프로그래밍  (0) 2023.05.16
DOM & EVENT (코딩앙마)  (0) 2023.04.27
To-Do List 만들기 2차  (0) 2023.04.06
To-Do List 만들기 1차  (0) 2023.04.03
To-Do List - JS 문법  (0) 2023.03.29