AJAX로 삭제 후 UI 변화시키기

해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.

 

삭제버튼을 클릭하면 todolist 목록 중 삭제 버튼이 클릭된 셀이 없어져야한다. 그 방법으로는 아래의 2가지 방법이 있다.

1. 새로 고침하기
2. <li> 요소 제거해주기

 

1. 새로 고침하기

location.reload(); //새로고침 코드

 

$('.delete').click(function(e){
  $.ajax({
    method: 'DELETE',
    url: '/delete',
    data: { _id: e.target.dataset.id}
  }).done(function (result) {
    location.reload(); //새로고침
    console.log('delete complete!');
  }).fail(function (error) {
    console.log('delete fail!');
  });  
})

 

 

 

---

2. <li> 요소 제거해주기

• currentSelected : 지금 이벤트가 동작하는 곳
• parent('li') : 부모태그 중에 li 태그
• fadeOut() : 사라지는 애니메이션

 

$('.delete').click(function(e){
 var cuttentSelected = $(this); //지금 이벤트가 동작하는 곳(클릭한 곳)
  $.ajax({
    method: 'DELETE',
    url: '/delete',
    data: { _id: e.target.dataset.id}
  }).done(function (result) {
    // location.reload();
    console.log('delete complete!');
    cuttentSelected.parent('li').fadeOut(); // 현재 누른 곳의 부모들중 li를 찾아서 fadeout 시켜라
  }).fail(function (error) {
    console.log('delete fail!');
  });  
})