이 코드는 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();
});
});
내 문제:
두 번째 입력 필드를 추가한다고 가정하면 입력 필드 옆에 삭제 버튼이 나타납니다. 삭제 버튼을 클릭하면 첫 번째 입력 필드가 삭제됩니다. 하지만 실제로 두 번째 필드를 삭제하고 싶습니다.
이 바이올린에 코드를 게시했습니다.
아래 코드 복사를 사용하고 이전 코드를 바꿀 수 있습니다.
var inext = 1;
$("body").on('click','.i_add_more',function(e){
// e.preventDefault();
console.log(inext);
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) + '" class="btn btn-danger i_remove_me pull-right" >-</button>';
var iremoveButton = $(iremoveBtn);
$(iaddto).after(inewInput);
$(iaddRemove).after(iremoveButton);
$("#icount").val(inext);
$('body').on('click','.i_remove_me',function(e){
e.preventDefault();
var ifieldNum = this.id.charAt(this.id.length-1);
var ifieldID = "#ifield" + ifieldNum;
console.log(ifieldID);
if(inext > 1 ) {
inext = inext - 1;
}else {
inext = 1;
}
console.log(this);
$(this).remove();
$(ifieldID).remove();
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다