html 데이터 삭제 방법

문제 : html 의 데이터 삭제하기 

---

생각: '/write' 액션에 'post' 을 방법을 한 것 처럼 'delete' 요청을 할 수 있지만 그럴려면 라이브러리 필요.

 

 

순서 :ajax (서버와 통신할 수 있는 자바스크립트 문법) :새로고침 없이도 통신 할 수 있음 jquery 라이브러리를 이용해서

---

1. 제이쿼리 cdn

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

 

2. ajax를 이용해서 서버와 통신하기 

$.ajax({
			method : 'delete',
			url: '/delete',
			data: '{_id :1}'

		}).done(function(result){
			
		})

 

 

3. 서버에서는 method를 했을 때 data를 요청에 받아온다. (*body._id 가 문자열로 읽히기 때문에 정수로 전환이 필요함)

app.delete('/delete', function(요청, 응답){
  요청.body._id = parseInt(요청.body._id)
  db.collection('post').deleteOne(요청.body, function(에러, 결과){
    console.log('삭제완료')
  })
  응답.send('삭제완료')
});

4. 문제는 새로고침할 때만 통신이 가기 때문에 삭제 버튼을 눌를 때 서버에 데이터 삭제를 요청해야 한다.

    4.1 버튼 태그에 class를 주면 되지 않을까?

 

html

<button class='delete' data-id= "<%= posts[i]._id %>" >삭제</button>

 

   4.2 class가 'delete'인 태그를 click 하면  함수를 실행해줘

 

	$('.delete').click(function(){

					ajax({
					method : 'DELETE',
					url : '/delete',
					data : { _id : 1 }
				}).done(function(결과){
				})

		})

 

4.3  매 번 _id :1 를 삭제 할 수 없으니 각 각의 글 번호에 맞춰서 삭제하자.

 

     첫 번째 방법 

   

<p>글번호는 : <%= posts[i] ._id %></p>

 

 

 숨기고 싶으면?

 

<button> tag 에 속성 추가 data-id= <%= posts[i] ._id %>

 

 

 

5. 이 정보를 제이쿼리를 이용해서 뿌려주기

글번호에 button을 클릭했을 때 데이터 중 data-id 의 값을 넣어주고 

data 속성에 넣어주기

$('.delete').click(function(e){
			var 글번호 =e.target.dataset.id
					$.ajax({
					method : 'DELETE',
					url : '/delete',
					data : { _id : 글번호 }
				}).done(function(결과){
				})

		})

 

6. 삭제버튼을 눌러도 ajax는 새로고침이 없어도 보내기 때문에 ui 적으로 제거가 되지 않음

 

   6.1 li 요소를 제거하거나

$('.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(){
					
				})

		})

 

 

   6.2 새로고침을 하거나