[ToDoList DB 3] 아이템 지우기

To Do List 만들기를 하고 있다. 

할 일을 완료해서 체크를 하면 

줄이 그어지며 지워져하는데 아이템이 지워지지는 않는다. 

 

 

아이템 지우는 작업을 해보자. 

 

1. list ejs에서 이미 있는 div를 form으로 감싼다. 

 

 

2. 브라우저에서 보면 아이템 줄이 안맞는데

이 것은 방금 만든 새 form이 이미 설정된 form에 css 적용되어서 그렇다. 

 

 

 

클래스를 설정하여 아래에 있는 form 만 적용되게 한다.

 

모든 form 적용

클래스에 해당되는 form만 적용

 

 

 

 

체크 박스가 있는 form에서 delete route로 가게 설정한다.

list.ejs

 

 

3. 그리고선 app.js에서 app.post()로

delete route를 만들어 form에서 보낸 내용을 받을 수 있게 한다. 

app.js

 

 

 

list.ejs에서 체크박스 form은 submit 버튼이 없다. 

대신 체크 박스를 클릭하면 지워지도록 해야한다. 

 

 

구글링을 해서 찾아보면 

 

stackover flow에 보면 내용이 나와있다. 

 

name과 onChange를 넣어준다. 

list.ejs

 

 

app.js에서 어떤 내용이 서버로 들어오나 보자

콘솔로 들어오는 내용을 받아보자.

console.log(req.body)

app.js

 

 

브라우저 화면을 리프레쉬하고

To Do List에서 체크박스를 누르면 

 

서버에 name에 해당하는 "checkbox"가 가므로 

콘솔에 checkbox와 on이 나온다. 

 

 

 

req.body.checkbox로 쓰면 그냥 on 만 나온다.

app.js

 

콘솔

 

 

여기서 우리가 필요한 것은 on 이니라 아이템 이름이 나오게 하는 것이다. 

 

일단 post를 할 때 name 뿐만 아니라 

value의 내용도 서버로 이동하므로 value 안에 아이템의 id를 받는다.

list.ejs

콘솔

 

 

 

 

그 받은 id 번호에 해당하는 데이터를 데이터 베이스에서 찾아 지운다. 

 

에러 콜백 안하고 싶더라도 해줘야한다. 

findByIdRemove는 callback을해야 실행이 된다.

 

체크를 하였는데 인터페이스는 변화된 것이 없지만 

이미 데이터는 지워진 상태이다.

 

 

 

res.redirect("/") 작업이 끝나면 홈으로 가게하여

체크박스 클릭시 바로 없어지게 한다. 

 

 

콘솔에는 성공 메세지가 뜬다.