[HTML&JQUERY] 리스트 삭제 버튼 구현

안녕하세요. 버튼을 통해서 행을 지우는 방법에 대해 알아보겠습니다.

보통의 HTML 리스트 형태는 아래와 같습니다.

(코드를 재수정하였습니다 2020년 12월)

 

 

리스트 항목을 삭제하기 위해서는 마지막 항목에 삭제 버튼을 넣어준 뒤, 제이쿼리를 이용해 선택 행을 지우는 작업이 필요합니다.

 

HTML

tbody 안에 button 태그를 입력한 후에 함수에서 받을 수 있도록 onclick 속성에 값을 입력한다. 이때 자신을 선택하도록 (this)를 넣어줍니다.

 

<tr style="text-align:center;">
    <td>수량</td>
    <td>
        <button type ="button" onclick="fnCalCount('p',this);">+</button>
        <input type="text" name="pop_out" value="0" readonly="readonly" style="text-align:center;"/>
        <button type="button" onclick="fnCalCount('m', this);">-</button>
    </td>
    <td>
    <button type="button" onclick="deleteRow(this);">X</button>
    </td>
</tr>

 

 

SCRIPT

  

스크립트 부분에서 onclick 값을 선언한 후에 행을 지우기 위해 부모값 ("tr")을 선언한 후, remove를 작성하면 완료가 됩니다.

 

<script>
function deleteRow(ths){
    var ths = $(ths);
    
    ths.parents("tr").remove();
}
</script>