this code from bootsnipp을 구현했습니다. 필드를 추가하고 버튼을 동적으로 제거 할 수 있습니다.동적 양식의 각 입력 필드 삭제 (추가 및 제거)
html로 부
<div class="form-group">
<input type="hidden" name="count" value="1" />
<label class="control-label col-md-2 col-sm-2 col-xs-12" for="image">Inclusion
</label>
<div class="col-md-5 col-sm-5 col-xs-12">
<input type="hidden" name="icount" value="1" />
<div id="i_field" class="form-group">
<input class="form-control" id="ifield1" name="inclusion[]" type="text" style="width: 89%">
<button id="b1" class="btn btn-info i_add_more" type="button">Add More</button>
</div>
</div>
</div>
JS 부분은
는var inext = 1;
$(".i_add_more").click(function(e){
// e.preventDefault();
var iaddto = "#ifield" + inext;
var iaddRemove = "#ifield" + (inext);
inext = inext + 1;
var inewIn = '<input type="text" class="form-control" id="ifield' + inext + '" name="inclusion[]" style="width: 89%">';
var inewInput = $(inewIn);
var iremoveBtn = '<button id="iremove' + (inext - 1) + '" class="btn btn-danger i_remove_me pull-right" >-</button>';
var iremoveButton = $(iremoveBtn);
$(iaddto).after(inewInput);
$(iaddRemove).after(iremoveButton);
$("#i_field" + inext).attr('data-source',$(iaddto).attr('data-source'));
$("#icount").val(inext);
$('.i_remove_me').click(function(e){
e.preventDefault();
var ifieldNum = this.id.charAt(this.id.length-1);
var ifieldID = "#ifield" + ifieldNum;
$(this).remove();
$(ifieldID).remove();
});
});
내 문제 : 가정하자
내가 두 번째 입력 필드를 추가 삭제 버튼 옆에 입력 필드에 나타납니다. 삭제 버튼을 클릭하면 첫 번째 입력란이 삭제됩니다. 하지만 실제로 두 번째 필드를 삭제하고 싶습니다.
나는 당신이 텍스트 상자를 제거하기 이전() 선택을 사용할 수 있습니다 this fiddle
. 예상대로 작동했습니다. – vijayrana