웹 페이지에서 테이블의 행 추가와 행 삭제 버튼을 모두 구현하려면, jQuery의 이벤트 위임(Event Delegation) 기법을 사용하는 것이 가장 효과적입니다. 이벤트 위임을 활용하면 나중에 동적으로 생성된 행에 대해서도 별도의 이벤트 바인딩 없이 클릭 이벤트가 정상적으로 동작합니다.
1. 삭제 버튼 설정하기
먼저 각 테이블 행에 삭제 버튼을 배치합니다. 아래와 같이 deletebtn 클래스를 가진 버튼을 정의합니다:
<button type="button" class="deletebtn" title="Remove row">X</button>
2. on() 메서드로 클릭 이벤트 처리하기
버튼 클릭 시 이벤트를 발생시키려면 jQuery의 on() 메서드를 사용합니다. document에 이벤트를 위임하면 동적으로 추가된 행의 버튼에서도 이벤트가 정상적으로 작동합니다:
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});여기서 핵심은 closest('tr')입니다. 클릭된 버튼(this)에서 가장 가까운 <tr> 요소를 찾아 해당 행 전체를 제거하는 방식입니다.
3. 전체 예제 코드
다음은 행 추가 기능과 행 삭제 기능을 모두 포함한 완전한 코드입니다. 새 행을 추가할 때는 첫 번째 행을 복제(clone)하고, 입력 필드의 ID와 name 속성에 고유한 숫자를 붙여 중복을 방지합니다:
예제
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = 1;
$("#newbtn").click(function () {
$("table tr:first").clone().find("input").each(function () {
$(this).val('').attr({
'id': function (_, id) {
return id + x
},
'name': function (_, name) {
return name + x
},
'value': ''
});
}).end().appendTo("table");
x++;
});
$(document).on('click', 'button.deletebtn', function () {
$(this).closest('tr').remove();
return false;
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<button type="button" class="deletebtn" title="Remove row">X</button>
</td>
<td>
<input type="text" id="txtTitle" name="txtTitle">
</td>
<td>
<input type="text" id="txtLink" name="txtLink">
</td>
</tr>
</table>
<button id="newbtn">Add new Row</button>
</body>
</html>핵심 포인트 정리
- 이벤트 위임:
$(document).on()을 사용하면 페이지 로드 후 동적으로 추가된 요소에도 이벤트가 적용됩니다. - closest() 메서드: 클릭된 버튼의 상위
<tr>을 찾아 해당 행만 정확히 삭제합니다. - 동적 행 추가:
clone()으로 기존 행을 복사하고, ID/name 속성에 고유 값을 부여해 폼 데이터 충돌을 방지합니다.
이 방식은 게시판, 설문 폼, 장바구니 등 사용자가 항목을 자유롭게 추가·삭제해야 하는 다양한 웹 애플리케이션에서 널리 활용됩니다.