我有一个表单的一部分,可以在单击按钮时添加新行。我通过使用jQuery append方法完成了这个。我还添加了删除单个附加项的代码,但如果取消选中特定复选框,我还需要能够删除所有附加项。
下面是我对按钮和输入字段的代码:
$(function() {
var max_fields = 10; //maximum input boxes allowed
var $wrapper = $(".input_fields_wrap"); //Fields wrapper
var $add_button = $(".add_field_button"); //Add button ID
var prefix1 = 'outlet[]';
var prefix2 = 'url[]';
$add_button.click(function(e) { //on add input button click
var count = $wrapper.find('.col-md-12').length;
e.preventDefault();
if (count < max_fields) { //max input box allowed
$wrapper.append('<div class="col-md-12">\
<div class="row">\
<div class="form-group">\
<div class="col-md-6">\
<input type="text" class="form-control" placeholder="Outlet" name="'+prefix1+'_'+count+'" id="'+prefix1+'_'+count+'" value=""/>\
</div>\
<div class="col-md-6">\
<div class="input-group">\
<input type="text" class="form-control" placeholder="URL" name="'+prefix2+'_'+count+'" id="'+prefix2+'_'+count+'" value=""/><span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>\
</div>\
</div>\
</div>\
</div>\
<p> </p>'); //add input box
} else {
alert('Maximum # of outlets is 10')
}
});
$wrapper.on("click",".glyphicon", function(e) { //user click on remove text
$(this).parents('.col-md-12').remove();
$wrapper.find('.col-md-12').each(function(i) {
$(this).find('input[type="text"]:first').attr({"id": prefix1+'_'+i, "name":prefix1+'_'+i});
$(this).find('input[type="text"]:last').attr({"id": prefix2+'_'+i, "name":prefix2+'_'+i});
});
});
});
我有一个显示和隐藏显示此代码的div的功能,但如果单击添加按钮后,用户取消选中该复选框,则div被隐藏,但除非我删除了添加的行刷新页面。
function socmedCh() {
if ($('#moc3').is(":checked")) {
$("#soc").show();
} else {
$("#soc").hide();
}
}
我需要删除所有附加项目。我已经尝试了删除方法的许多变体,但还没有完全删除以前附加的整个html段的每一部分。
非常感谢任何见解。
答案 0 :(得分:3)
向新添加的输入组添加一个类,然后在else处理程序中选择那些删除它们的元素
$(function() {
var max_fields = 10; //maximum input boxes allowed
var $wrapper = $(".input_fields_wrap"); //Fields wrapper
var $add_button = $(".add_field_button"); //Add button ID
var prefix1 = 'outlet[]';
var prefix2 = 'url[]';
$add_button.click(function(e) { //on add input button click
var count = $wrapper.find('.col-md-12').length;
e.preventDefault();
if (count < max_fields) { //max input box allowed
$wrapper.append('<div class="col-md-12 new-group">\
<div class="row">\
<div class="form-group">\
<div class="col-md-6">\
<input type="text" class="form-control" placeholder="Outlet" name="' + prefix1 + '_' + count + '" id="' + prefix1 + '_' + count + '" value=""/>\
</div>\
<div class="col-md-6">\
<div class="input-group">\
<input type="text" class="form-control" placeholder="URL" name="' + prefix2 + '_' + count + '" id="' + prefix2 + '_' + count + '" value=""/><span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>\
</div>\
</div>\
</div>\
</div>\
<p> </p>'); //add input box
} else {
alert('Maximum # of outlets is 10')
}
});
$wrapper.on("click", ".glyphicon", function(e) { //user click on remove text
$(this).closest('.col-md-12').remove();
$wrapper.find('.col-md-12').each(function(i) {
$(this).find('input[type="text"]:first').attr({
"id": prefix1 + '_' + i,
"name": prefix1 + '_' + i
});
$(this).find('input[type="text"]:last').attr({
"id": prefix2 + '_' + i,
"name": prefix2 + '_' + i
});
});
});
});
$('#moc3').change(socmedCh);
function socmedCh() {
if ($('#moc3').is(":checked")) {
$("#soc").show();
} else {
$("#soc").hide();
$('.input_fields_wrap .new-group').remove();
}
}
#soc {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="moc3" type="checkbox" />
<div id="soc">
<button class="add_field_button">Add</button>
<div class="input_fields_wrap"></div>
</div>
答案 1 :(得分:0)
这里是Arun P Johny的简单代码:
$('#moc3').change(socmedCh);
function socmedCh() {
if ($('#moc3').is(":checked")) {
$("#soc").show();
} else {
$("#soc").hide();
$('.input_fields_wrap .new-group').remove();
}
}
#soc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="moc3" type="checkbox" />
<div id="soc">
<button class="add_field_button">Add</button>
<div class="input_fields_wrap"></div>
</div>