27 댓글 삭제 with JS
# 댓글 삭제 with 자바스크립트(JS)
## 미션
REST API를 호출하여 댓글을 삭제하시오.
## 01:25 삭제 버튼 추가 - button
#### ../comments/_list.mustache
```
<div id="comments-list">
{{#commentDtos}}
<div class="card m-2" id="comments-{{id}}">
<div class="card-header">
{{nickname}}
<button type="button"
class="btn btn-sm btn-outline-primary"
data-bs-toggle="modal"
data-bs-target="#comment-edit-modal"
data-bs-id="{{id}}"
data-bs-nickname="{{nickname}}"
data-bs-body="{{body}}"
data-bs-article-id="{{articleId}}">수정</button>
<!-- 댓글 삭제 버튼 -->
<button type="button"
class="btn btn-sm btn-outline-danger comment-delete-btn">삭제</button>
</div>
<div class="card-body">
{{body}}
</div>
</div>
{{/commentDtos}}
</div>
<!-- Modal -->
<div class="modal fade" id="comment-edit-modal" tabindex="-1">
...
</div>
<!-- 모달 이벤트 처리 -->
<Script>
...
</script>
```
## 02:32 클릭 이벤트 처리 - querySelectorAll(), forEach(), addEventListener()
#### ../comments/_list.mustache
```
<div id="comments-list">
...
</div>
<!-- Modal -->
<div class="modal fade" id="comment-edit-modal" tabindex="-1">
...
</div>
<!-- 모달 이벤트 처리 -->
<Script>
...
</script>
<!-- 댓글 삭제 -->
<Script>
{
// 삭제 버튼 선택
const commentDeleteBtns = document.querySelectorAll(".comment-delete-btn");
// 삭제 버튼 이벤트를 처리
commentDeleteBtns.forEach(btn => {
// 각 버튼의 이벤트 처리를 등록
btn.addEventListener("click", () => {
console.log("삭제 버튼이 클릭되었습니다..!");
});
});
}
</script>
```
## 08:31 삭제 댓글 id 가져오기 - html data attribute, getAttribute(), 백틱 문자열
#### ../comments/_list.mustache
```
<div id="comments-list">
{{#commentDtos}}
<div class="card m-2" id="comments-{{id}}">
<div class="card-header">
{{nickname}}
<button type="button"
class="btn btn-sm btn-outline-primary"
data-bs-toggle="modal"
data-bs-target="#comment-edit-modal"
data-bs-id="{{id}}"
data-bs-nickname="{{nickname}}"
data-bs-body="{{body}}"
data-bs-article-id="{{articleId}}">수정</button>
<!-- 댓글 삭제 버튼 -->
<button type="button"
class="btn btn-sm btn-outline-danger comment-delete-btn"
data-comment-id="{{id}}">삭제</button>
</div>
<div class="card-body">
{{body}}
</div>
</div>
{{/commentDtos}}
</div>
<!-- Modal -->
<div class="modal fade" id="comment-edit-modal" tabindex="-1">
...
</div>
<!-- 모달 이벤트 처리 -->
<Script>
...
</script>
<!-- 댓글 삭제 -->
<Script>
{
// 삭제 버튼 선택
const commentDeleteBtns = document.querySelectorAll(".comment-delete-btn");
// 삭제 버튼 이벤트를 처리
commentDeleteBtns.forEach(btn => {
// 각 버튼의 이벤트 처리를 등록
btn.addEventListener("click", (event) => {
// 이벤트 발생 요소를 선택
const commentDeleteBtn = event.target;
// 삭제 댓글 id 가져오기
const commentId = commentDeleteBtn.getAttribute("data-comment-id");
console.log(`삭제 버튼 클릭: ${commentId}번 댓글`);
});
});
}
</script>
```
## 11:47 삭제 API 호출 및 처리 - 백틱 문자열, fetch(), http delete, remove()
#### ../comments/_list.mustache
```
<div id="comments-list">
...
</div>
<!-- Modal -->
<div class="modal fade" id="comment-edit-modal" tabindex="-1">
...
</div>
<!-- 모달 이벤트 처리 -->
<Script>
...
</script>
<!-- 댓글 삭제 -->
<Script>
{
// 삭제 버튼 선택
const commentDeleteBtns = document.querySelectorAll(".comment-delete-btn");
// 삭제 버튼 이벤트를 처리
commentDeleteBtns.forEach(btn => {
// 각 버튼의 이벤트 처리를 등록
btn.addEventListener("click", (event) => {
// 이벤트 발생 요소를 선택
const commentDeleteBtn = event.target;
// 삭제 댓글 id 가져오기
const commentId = commentDeleteBtn.getAttribute("data-comment-id");
console.log(`삭제 버튼 클릭: ${commentId}번 댓글`);
// 삭제 API 호출 및 처리
const url = `/api/comments/${commentId}`;
fetch(url, {
method: "DELETE"
}).then(response => {
// 댓글 삭제 실패 처리
if (!response.ok) {
alert("댓글 삭제 실패..!");
return;
}
// 삭제 성공 시, 댓글을 화면에서 지움!
const target = document.querySelector(`#comments-${commentId}`);
target.remove();
});
});
});
}
</script>
```
## 🔥 구글링 훈련하기
- JavaScript querySelectorAll 사용법
- JavaScript forEach 사용법
- JavaScript Template Literals
- JavaScript Remove