[Jquery]로 마지막 TR 제거 방법

jQuery로 테이블의 마지막 TR 제거하는 방법

안녕하세요, 개발자 여러분! 오늘은 jQuery를 사용해서 테이블의 마지막 행(<tr>)을 제거하는 방법을 간단히 알아보겠습니다. 여러 가지 방법이 있으니 상황에 맞게 활용해보세요!

1. 기본 제거 방법

가장 간단한 방법 두 가지를 먼저 소개합니다.

• :last 선택자 사용

$("tr:last").remove();

• last() 메소드 사용

$("tr").last().remove();

2. 특정 테이블에 적용하기

만약 여러 테이블 중 특정 테이블의 마지막 행만 제거하고 싶다면, 테이블의 ID나 클래스를 지정하면 됩니다.

// ID가 'myTable'인 테이블의 마지막 행 제거
$("#myTable tr:last").remove();

// 클래스가 'table-class'인 테이블의 마지막 행 제거
$(".table-class tr").last().remove();

3. 실습 예제

아래는 실제로 동작하는 전체 코드 예제입니다. 버튼을 클릭하면 테이블의 마지막 행이 사라집니다.

<table id="myTable">
    <tr><td>첫 번째 행</td></tr>
    <tr><td>두 번째 행</td></tr>
    <tr><td>마지막 행</td></tr>
</table>

<button id="removeLast">마지막 행 제거</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $("#removeLast").click(function() {
        $("#myTable tr:last").remove();
    });
</script>

4. 추가 팁: 안전하게 사용하기

테이블이 비어있는 경우 오류를 방지하려면 행이 있는지 먼저 확인하는 게 좋습니다.

if ($("tr").length > 0) {
    $("tr:last").remove();
}

이렇게 하면 테이블이 비어있어도 코드가 안전하게 실행됩니다.

마무리

jQuery로 마지막 <tr>을 제거하는 건 정말 간단하죠? 위 방법 중에서 프로젝트에 맞는 걸 골라 사용해보세요. 궁금한 점이 있으면 언제든 댓글로 물어보아 주세요! 😊