(list.ejs 파일)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/public/main.css">
<title>TODOAPP</title>
</head>
<body>
<%- include('nav.html') %>
<div class="container mt-4">
<ul class="list-group">
<h4>To Do List</h4>
<% for (let i=0; i < posts.length ; i++) { %>
<li class="list-group-item d-flex">
<div class="flex-grow-1 bd-highlight">
<a href="/detail/<%= posts[i]._id %>" class="text-muted text-decoration-none flex-grow-1 bd-highlight">할일
: <%= posts[i].title %>
</a><br>
<a href="/detail/<%= posts[i]._id %>" class="text-muted text-decoration-none">마감일 : <%= posts[i].date %>
</a>
</div>
<!-- <button type="button" class="btn btn-danger ms-3 edit" data-id="<%= posts[i]._id %>"><a
href="/edit/<%= posts[i]._id %>" class="text-decoration-none text-white">수정</a></button> -->
<button type="button" class="btn-close delete mt-3 ms-3" aria-label="Close"
data-id="<%= posts[i]._id %>"></button>
</li>
<% } %>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 서버에 새로고침없이 /delete 경로로 DELETE 요청을 할거에요
$('.delete').click(function (e) {
let 글번호 = e.target.dataset.id
let 지금누른거 = $(this)
$.ajax({
method: 'DELETE',
url: '/delete',
data: { _id: 글번호 }
}).done((result) => { // 요청이 성공하면 요걸 실행해주세요~
console.log(지금누른거.parents('li').html());
지금누른거.parents('li').fadeOut()
}).fail(function (xhr, textStatus, errorThrown) { // 요청 실패시 실행할 코드
console.log(xhr, textStatus, errorThrown);
})
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
위처럼 작성했어요. jquery 설치파일이 하나 더 있다는게 다른 ejs 파일에도 jquery 가 설치되어 있으면 안된다는 말씀이신가요? 다른 파일에는 jquery 설치파일도 일단 다 삭제 해 봤는데도 안되네요.
지금누른거.parent('li').fadeOut(); 말고
지금누른거.parent('.list-group').fadeOut(); 하면 다시 안나타나는데 혹시 반복문에 뭔가 잘못된 걸까요?
