반응형
SMALL
list.ejs파일에 delete버튼을 span태그로 하나 추가했다.dataset을 통해서 데이터를 입력해주었다.dataset은 태그의 속성으로 data-뒤에 이름을 하나 정해서 값을 넣어두면script에서 가져다 쓰기 좋다.
post의 갯수만큼 데이터들이 생길 것이고 거기에 맞춰서 eventListener를 달아주었다.
값은 e.target.dataset.id로 가져왔는데, html에서 선언한 span의 속성 중 data-id의 값을 가져온 것이다.data-id가 아니라 data-user라고 이름을 정했으면 e.target.dataset.user에 값이 들어있을 것이다.
여기서 fetch를 통해서 query에 값을 하나 넣어서 보냈는데, 다른 방식으로도 값을 보낼 수 있다.
- list.ejs
<body class="grey-bg">
<%- include('nav.ejs') %>
<div class="white-bg">
<% for (let i = 0; i < posts.length; i++) { %>
<div class="list-box">
<h4>
<a href="/detail/<%= posts[i]._id %>"><%= posts[i].title %></a>
<a href="/edit/<%= posts[i]._id %>">✏️</a>
<span class="delete" data-id="<%= posts[i]._id %>">🗑️</span>
</h4>
<p><%= posts[i].content %></p>
</div>
<% } %>
</div>
<a href="/list/next/<%= posts[posts.length-1]._id %>">다음</a>
<script>
// Fetch all the delete buttons
const deleteButtons = document.querySelectorAll('.delete');
// Add event listeners to each delete button
deleteButtons.forEach(button => {
button.addEventListener('click', function(e) {
const id = e.target.dataset.id;
fetch('/delete?docid=' + id, {
method: 'DELETE'
})
.then(response => response.text())
.then(result => {
e.target.parentElement.parentElement.style.display = 'none'
})
});
});
</script>
</body>- delete함수 서버코드
app.delete('/delete', async (req, res) => {
await db.collection('post').deleteOne({ _id: new ObjectId(req.query.docid) });
res.send('삭제완료');
});반응형
LIST
'Node.js' 카테고리의 다른 글
| nodejs express CRUD 만들기 3(UPDATE) (0) | 2024.08.06 |
|---|---|
| nodejs express CRUD 만들기 2(READ) (0) | 2024.08.06 |
| nodejs express CRUD 만들기 1(CREATE) (0) | 2024.08.06 |
| express로 만든 서버에 mongoDB연동 + 데이터 화면에 출력 하기 (0) | 2024.08.02 |
| express 라이브러리 이용해서 서버 만들기 (0) | 2024.08.01 |