[jQuery] 복제된 입력 요소의 값을 초기화 하고 추가하기

아래와 같은 구조의 html 문서가 있을 때 마지막 tr 엘리먼트를 복제한 후 그 안에 포함된 input 엘리먼트 등의 값을 초기화하고 복제한 엘리먼트 다음에 새롭게 추가하는 방법이다. jQuery의 end()를 사용하면 간단하게 해결할 수 있다.

<table>
<tr>
    <td>
        <input type="checkbox" name="chk[]" value="1" id="chk_1" disabled="disabled">
        <label for="chk_1">체크</label>
    </td>
    <td>
        <input type="text" name="option[]" value="" id="option_1">
        <label for="option_1">옵션명</label>
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="chk[]" value="1" id="chk_2" disabled="disabled">
        <label for="chk_2">체크</label>
    </td>
    <td>
        <input type="text" name="option[]" value="" id="option_2">
        <label for="option_2">옵션명</label>
    </td>
</tr>
</table>
<div><button type="button" id="add_field">입력 필드 추가</button></div>

checkbox의 disabled 속성을 제겅하고 option 필드의 입력 값을 초기화한 후 tr 엘리먼트를 복제해서 추가하는 코드는 아래와 같다.

<script>
$(function() {
    $("#add_field").on("click", function() {
        var $el = $("tr:last");

        $el.after(
                $el.clone()
                    .find(":checkbox").attr("disabled", false).end()
                    .find("input[name^=option]").val("").end()
            );
    });
});
</script>

find()를 이용해 각각의 엘리먼트를 찾고 값을 초기화한 후 end()를 사용해 이전 단계로 돌아가는 식으로 처리가 된다.