-
글쓴이글
-
2021년 12월 22일 00:03 #22570
방나영참가자delete하는 부분 $('.delete').click(function(e){} 에서 (e)=>이렇게 쓰면 fadeOut이 안되고
function(e)로 바꾸니까 fadeOut이 되던데,
()=>이 방식으로 쓰면 왜 안되는 지 궁금합니다. (콘솔에러도 없었어요)
<script>
$('.delete').click(function(e){
$.ajax({
method: 'DELETE',
url:'/delete',
data: {_id:e.target.dataset.id}}).done((result)=>{
console.log('성공!');
console.log(this);
$(this).parent('li').fadeOut();
}).fail((xhr, textStatus, errorThrown)=>{
console.log(xhr, textStatus, errorThrown);
});
})
</script>--------------------------------------------------------------------- list.ejs 전체코드
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/><!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/><title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Todo App</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Write</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Temp</a>
</li>
</ul>
</div>
</nav>
<h4 class="ml-2 my-3">할일 리스트 </h4>
<!-- <% for(var i=0; i<posts.length; i++){%>
<h4>할일 제목:<%=posts[i].title%></h4>
<p>할일 마감날짜:<%=posts[i].date%></p>
<button>Delete</button>
<%} %> --><ul class="list-group">
<% for(var i=0; i<posts.length; i++){%>
<li class="list-group-item">
<p>글번호: <%= posts[i]._id %></p>
<h4>할일 제목:<%=posts[i].title %></h4>
<p>할일 마감날짜:<%=posts[i].date %></p>
<button class="delete btn btn-outline-danger btn-sm" data-id="<%= posts[i]._id %>">Delete</button>
</li>
<% } %>
</ul><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$('.delete').click(function(e){
$.ajax({
method: 'DELETE',
url:'/delete',
data: {_id:e.target.dataset.id}
}).done((result)=>{
console.log('성공!');
console.log(this);
$(this).parent('li').fadeOut();
}).fail((xhr, textStatus, errorThrown)=>{
console.log(xhr, textStatus, errorThrown);
});
})
</script><!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<!-- <script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"
></script> --><!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-->
</body>
</html> -
글쓴이글
- 답변은 로그인 후 가능합니다.