인풋 추가 관련 문의 드립니다 채택완료

달료라 1년 전 조회 3,835

<script type="text/javascript">
$(function() {
    var c = "", n, nn;
    $("input[type='button']").on("click", function() {
        c = $(this).prev("input").attr("name").split("_");
        n = $(this).siblings("input[name^='" + c[0] + "']:last").attr("name").split("_");
        nn = parseInt(n[1]) > 1 ? parseInt(n[1]) + 1 : 2;
        $(this).parent("div").append("<input type='text' name='" + c[0] + "_" + nn + "' /><input type='button' value='삭제' class='rem' />");
    });
    $("body").on("click", "input.rem", function() {
        $(this).prev().remove();
        $(this).remove();
    });
});
</script>
<div><input type="text" name="wr_31" /><input type="button" value="추가" /></div>

위 내용은 wr_31부터 추가버튼으로 필드가 늘어나는 부분인데, 여기서 추가를 5개 했을 경우 3번째거 wr_33를 지우면 wr_34가 wr_33으로 되어야 하는데 wr_33이 그냥 빈공란으로 됩니다. 혹시 wr_34가 _wr_33으로 값을 가지게 하려면 방법이 있을까요? 중간에 삭제가 되면 한 필드씩 앞으로 오게 하고 싶습니다

#그누보드 #인풋

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

RYANRYAN

1년 전

</p>

<p><script></p>

<pre>
$("body").on("click", "input.rem", function() {
    var prev = $(this).prev();
    var name = prev.attr("name");
    var num = parseInt(name.split("_")[1]);

    // 삭제된 필드 다음의 모든 필드 이름을 업데이트
    $("input[name^='" + c[0] + "']").each(function() {
        var this_num = parseInt($(this).attr("name").split("_")[1]);
        if (this_num > num) {
            $(this).attr("name", c[0] + "_" + (this_num - 1));
        }
    });

    prev.remove();
    $(this).remove();
});</pre>

<p></script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

�

달료라

1년 전

좋은 답변 감사합니다. 그런데
<div><input type="text" name="wr_31" /><input type="button" value="추가" /></div>
인풋 버튼을 반응을 하지 않네요.ㅠㅠ 따로 다른 부분을 수정해야 할까요?

RYANRYAN

1년 전

$("body").on("click", "input.rem", function() {
$(this).prev().remove();
$(this).remove();
});

이 부분만 변경하세요.

�

달료라

1년 전

prev.remove();
$(this).remove();

이거로 변경 했는데 버튼이 안먹네요.ㅠㅠ

RYANRYAN

1년 전

제가 드린 부분중

=================
$("body").on("click", "input.rem", function() {
var prev = $(this).prev();
var name = prev.attr("name");
var num = parseInt(name.split("_")[1]);

// 삭제된 필드 다음의 모든 필드 이름을 업데이트
$("input[name^='" + c[0] + "']").each(function() {
var this_num = parseInt($(this).attr("name").split("_")[1]);
if (this_num > num) {
$(this).attr("name", c[0] + "_" + (this_num - 1));
}
});

prev.remove();
$(this).remove();
});
=====================

이게 한덩어리 함수에요..

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

인풋 추가 관련 문의 드립니다 채택완료

답변 1개

답변에 대한 댓글 4개

공유하기