[jQuery] 체크박스(checkBox)에 체크된 행(Row) 삭제하기

 

 

자바스크립트의 제이쿼리(jQuery)를 사용하여 목록 List의 데이터중에 체크박스(checkBox)에 체크된 행(Row)을 삭제하는 방법입니다. 

체크박스(checkBox)의 체크된 행 삭제하기

	<div class="row">
		<button type="button" id="delBtn">삭제</button>
		<table width="100%">
			<thead>
				<tr>
					<th>선택</th>
					<th>No. </th>
					<th>아이디</th>
					<th>이메일</th>
				</tr>
			</thead>
			<tbody>				
				<tr>
					<td><input type="checkbox" name="Chk_list" ></td>
					<td>1</td>
					<td>Test01</td>
					<td>Test01@gmail.com</td>
				
				</tr>
				<tr>
					<td><input type="checkbox" name="Chk_list" ></td>
					<td>2</td>
					<td>test02</td>
					<td>test02@naver.com</td>
					
				</tr>
				<tr>
					<td><input type="checkbox" name="Chk_list" ></td>
					<td>3</td>
					<td>test03</td>
					<td>test03@gmail.com</td>
				</tr>
			</tbody>
		</table>
	</div>

 

가장 먼저 체크박스(checkBox) 목록 데이터를 반복문으로 체크된 데이터만 조회하여 관련된 상위 엘리먼트(parentElement)를 확인하여 관련돼 행(Row)을 삭제하면 됩니다.

<script>

$('#delBtn').click(function() {
 	if ($("input:checkbox[name='Chk_list']:checked").length === 0) {
        alert("삭제할 항목을 선택해 주세요.");
        return;
    }
    
    $("input:checkbox[name='Chk_list']:checked").each(function(k,kVal){
        console.log("kVal ::", kVal.parentElement.parentElement.parentElement);
        let a = kVal.parentElement.parentElement.parentElement;
        $(a).remove();
    });
    
});

</script>