인풋 추가 관련 문의 드립니다
본문
<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
<script>
$("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();
});
</script>
좋은 답변 감사합니다. 그런데
<div><input type="text" name="wr_31" /><input type="button" value="추가" /></div>
인풋 버튼을 반응을 하지 않네요.ㅠㅠ 따로 다른 부분을 수정해야 할까요?
$("body").on("click", "input.rem", function() {
$(this).prev().remove();
$(this).remove();
});
이 부분만 변경하세요.
prev.remove();
$(this).remove();
이거로 변경 했는데 버튼이 안먹네요.ㅠㅠ
제가 드린 부분중
=================
$("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();
});
=====================
이게 한덩어리 함수에요..
