선생님 삭제하기 버튼을 누르면 삭제는 됩니다
근데 제가 두번째 게시물을 삭제하면 fadeout까지 두번째 게시물에 효과가 적용되고
새로고침을하면 맨위에있는 게시물이 삭제되는데 제가 어떤 실수를 한것일까요
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="list.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<%- include('nav.html') %>
<!-- 서버에서 가져온 할 일 리스트 -->
<div class="container input-group mb-2">
<input class="form-control" id="serch-input">
<button class="input-group-append btn btn-danger" id="serch">검색</button>
</div>
<ul class="list-group">
<% for (var i = 0; i < posts.length; i++){ %>
<li class="list-group-item">
<h4> 할일 제목 : <%= posts[i].제목 %> </h4>
<p> 할일 마감날짜 : <%= posts[i].날짜 %> </p>
<button class="delete" data-id="<%= posts[i]._id %>">삭제</button>
<button class="edit" data-id="<%= posts[i]._id %>">수정</button>
<% } %>
<script>
$('.delete').click(function(e){
var 글번호 = e.target.dataset.id;
var 지금누른거 =$(this);
$.ajax({
method : 'DELETE',
url : '/delete',
data : {_id : 글번호}
}).done(function(결과){
console.log('성공함')
지금누른거.parent('li').fadeOut();
}).fail(function(){
console.log('실패')
})
})
$('#serch').click(function(){
var 입력 = $('#serch-input').val()
window.location.replace('/serch?value=' + 입력)
})
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>
