To Do List 만들기를 하고 있다.
할 일을 완료해서 체크를 하면
줄이 그어지며 지워져하는데 아이템이 지워지지는 않는다.
아이템 지우는 작업을 해보자.
1. list ejs에서 이미 있는 div를 form으로 감싼다.
2. 브라우저에서 보면 아이템 줄이 안맞는데
이 것은 방금 만든 새 form이 이미 설정된 form에 css 적용되어서 그렇다.
클래스를 설정하여 아래에 있는 form 만 적용되게 한다.
체크 박스가 있는 form에서 delete route로 가게 설정한다.
3. 그리고선 app.js에서 app.post()로
delete route를 만들어 form에서 보낸 내용을 받을 수 있게 한다.
list.ejs에서 체크박스 form은 submit 버튼이 없다.
대신 체크 박스를 클릭하면 지워지도록 해야한다.
구글링을 해서 찾아보면
stackover flow에 보면 내용이 나와있다.
name과 onChange를 넣어준다.
app.js에서 어떤 내용이 서버로 들어오나 보자
콘솔로 들어오는 내용을 받아보자.
console.log(req.body)
브라우저 화면을 리프레쉬하고
To Do List에서 체크박스를 누르면
서버에 name에 해당하는 "checkbox"가 가므로
콘솔에 checkbox와 on이 나온다.
req.body.checkbox로 쓰면 그냥 on 만 나온다.
여기서 우리가 필요한 것은 on 이니라 아이템 이름이 나오게 하는 것이다.
일단 post를 할 때 name 뿐만 아니라
value의 내용도 서버로 이동하므로 value 안에 아이템의 id를 받는다.
그 받은 id 번호에 해당하는 데이터를 데이터 베이스에서 찾아 지운다.
에러 콜백 안하고 싶더라도 해줘야한다.
findByIdRemove는 callback을해야 실행이 된다.
체크를 하였는데 인터페이스는 변화된 것이 없지만
이미 데이터는 지워진 상태이다.
res.redirect("/") 작업이 끝나면 홈으로 가게하여
체크박스 클릭시 바로 없어지게 한다.
콘솔에는 성공 메세지가 뜬다.
'Databases > To Do List DB' 카테고리의 다른 글
[ToDoList DB 6] 데이터 삭제- 해당 페이지에 있는 데이터 삭제 (0) | 2021.11.27 |
---|---|
[ToDoList DB 5] 해당 페이지에 맞게 아이템 추가 시키기 (0) | 2021.11.26 |
[ToDoList DB 4] Work 페이지 만들기 | Express Route Parameters (0) | 2021.11.25 |
[ToDoList DB 2] DB에 아이템 입력하기 (0) | 2021.11.25 |
[ToDoList DB 1] To Do List에 데이터 베이스 연결 | DB 데이터 ejs 로 렌더링 (0) | 2021.11.25 |
댓글