[블로그 만들기] 댓글 삭제 -2)

2021.08.03 - [Spring] - [블로그 만들기] 댓글 달기 -1)

위 게시물에 이어서작성한 댓글을 삭제하는 기능을 만들어봅니다.

<button> 태그에 버튼이 눌렸을 때 실행될 함수를 지정해줍니다.

이때 함수의 매개변수로 해당 댓글의 아이디를 전달해줍니다. 자바스크립트 작성 시 EL표현식으로 아이디 값을 받아와도 되지만 함수가 실행될 때 전달해주면 나중에 자바스크립트 파일을 따로 만들어서 관리할 때 편리해집니다.

스크립트 코드 내에 EL표현식이 있다면 해당 코드는 그 파일 내에 존재해야 하기 때문에 자바스크립트 파일을 따로 만들어 관리할 때 엄청난 수고스러움이 발생할 수 있습니다.

 

<script> 태그에 버튼을 눌렀을 때 실행될 함수를 작성해 줍니다. 

form태그의 submit이 실행되면서 페이지가 새로고침 되는데 event.preventDefault(); 함수를 실행시켜 새로고침 되는 것을 막아주는데 button의 onclick 속성에 적용된 함수이므로 event.preventDefault()를 해주지 않아도 괜찮습니다.

데이터를 삭제할 것이기 때문에 HTTP 메서드는 delete로 정해줍니다. 

fetch를 통해 이동한 주소의 값에서 반환 받은 결과 값이 "ok"라면 바로 해당 댓글이 삭제되어 화면에 보이지 않도록 해줍니다. 

deleteEL은 "#reply-id"를 id값으로 가지고 있는 쿼리를 선택해주고, remove()함수를 통해 화면에서 지워줍니다.

 

서버를 실행시켜서 확인해보면

이런 상황에서 삭제 버튼을 누르면

 

잘 삭제가 되는 것을 볼 수 있습니다.