7일차_6일차 쇼핑몰 주문하기 삭제기능 만들기(변경)

삭제 기능 만들기 형식 변경

 

6일차 _ 쇼핑몰 주문하기 삭제기능 만들기

 

6일차 삭제기능 만들기에서 아래 그림에서 보이는 것과 같이 

이 방법을 사용하고 싶었는데 버튼이 뜨지 않았었다.

 

5주차 moviestar 강의를 다시보고 코드를 수정 했더니 실행되었다.

server쪽 코드는 동일하며 client 코드만 수정했다.

 

 

 

 

실행이 되지 않았던 이유

 

먼저 아래 설명을 보면 이해하기 쉽다.

 

<th></th> : table head 약자, 표의 제목을 쓰는 역할

<tr></tr> : table row의 약자, 가로줄을 만드는 역할

<td></td> : table data의 약자, 셀을 만드는 역할

 

출처 : ☑

 

 

 

처음 작성한 코드는 아래와 같다.

let temp_html = `<tr>
	<th scope="row">${name}</th>
	<td>${count}</td>
	<td>${address}</td>
	<td>${phone}</td>
	<button class="btn btn-outline-secondary" onclick="deletename()" type="button">취소하기</button>
</tr>`

 

 

강의를 보고 다시 작성한 코드는 아래와 같다.

let temp_html = `<tr>
	<th scope="row">${name}</th>
	<td>${count}</td>
	<td>${address}</td>
	<td>${phone}</td>
	<td><button class="btn btn-outline-secondary" onclick="deletename()" type="button">취소하기</button></td>
</tr>`

 

버튼을 표의 셀에 추가를 하지않고 버튼을 생성해서 화면에 띄우지 못했던 것이었다.

<td> 안에 넣고 button tag를 넣으니 버튼이 생성된 것을 확인할 수 있었다.

 

 

 

 

취소하기 버튼을 누르면 삭제 실행시키기

 

          function deletename(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {name_give: name}, 
                    success: function (response) {
                           alert(response['msg']);
                        window.location.reload() 
                    }
                });
            }

이름을 받아야 그 이름을 넘겨주면서 delete를 실행할 수 있다.

 

 

 

! 주의 !

<td><button  class="btn btn-outline-secondary" onclick="deletename('${name}')" type="button">취소하기</button></td>

onclick="deletename(${name})"       ❌

onclick="deletename("${name}")"   ❌

onclick="deletename('${name}')"     ⭕