fadeOut()기능이 적용되지않습니다

[정재현]

<server.js>
app.delete('/delete', function(요청, 응답){
    요청.body._id = parseInt(요청.body._id)
    db.collection('post').deleteOne(요청.body, function(error, result){
        console.log('삭제완료');
        응답.status(200).send('성공했습니다');
    })
})

<list.ejs>

    <h4 class='my-3 mx-5'>서버에 저장되어 있는 할일 리스트</h4>
    <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].제목 %>
                </h4>
                <p> 할일 마감날짜 : <%= posts[i].날짜 %>
                </p>
                <button class="delete" data-id="<%= posts[i]._id %>">삭제</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(function(){
                console.log('성공응답도착!');
                $(this).parents('li').fadeOut();
            })
        });

parents와 parent 둘 다 사용해보았고

원래 arrow function으로 했지만 다시 일반 function(){}으로 바꾸었습니다.

안되는 이유가 제 눈에 보이지 않아서 질문드립니다
 

[codingapple]

.parent().fadeOut() 이라고 써봅시다

혹은 .parent().hide() 이걸로요 

[정재현]

.parent().fadeOut()

.parents().fadeOut()

.parent().hide()  

.parents().hide()

시도 해 보았지만 적용되지 않습니다..

그리고 한가지 더 궁금한 점이 있습니다.

부트스트랩으로 클래스명을 적용해서 버튼에 css 효과를 주고

<button class="btn btn-danger" data-id="<%= posts[i]._id %>">삭제</button>
그 버튼에         $('.클래스명').click(function(e){}   <== 이것을 적용시키고 싶은데 어떤 방법이 있는지 궁금합니다.
 

 

[codingapple]

크롬콘솔창에 혹시 에러가 뜨나요

그리고 버튼눌렀을 때 $(this) 이런걸 콘솔창에 출력해봅시다

클래스명을 btn btn-danger delete 

이런식으로 추가하면 됩니다

[정재현]

크롬 콘솔창에 오류 없이 잘 찍히고

        $('.delete').click(function(e){
            $.ajax({
                method: 'DELETE',
                url: '/delete',
                data: { _id: e.target.dataset.id }
            }).done(function(){
                console.log('성공응답도착!');
                console.log($(this));  <== 추가해서 콘솔창에 띄웠습니다.
                $(this).parent('li').hide();
            })
        });
 조언해주신대로 $(this)를 콘솔창에 찍어보았습니다.

위 사진에서 처럼 나오는데 무엇을 의미하는지 잘 모르겠습니다.

<button class="btn btn-danger delete" data-id="<%= posts[i]._id %>">삭제</button>은 잘 됩니다. 감사합니다!
 

[codingapple]

.done(()=>{

})

이 함수로 바꾸면 될듯요 

[정재현]

해결되었습니다 ㅜㅜ 감사합니다

[아이유]

안녕하세요!

저도 같은 문제가 있었는데 jquery 버전이 달라서 그런지

위 해결 방법으로는 안되더라구요 ㅠㅠ

 

구글링보니 현재 타겟을 찾는 비슷한 방법이 있길래

$(this) 대신 $(e.target) 로 고쳐서 해결했습니다! (click()의 콜백함수 인자인 e로 해도 되고 event로해도 되더라구요)

 

혹시 저와 같은 부분에서 막히는 분 계실까봐 댓글남깁니다

[글쓴이]

글