[摘要] jquery无刷新添加和删除input输入框 增加减少input框
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.9.1.min.js"></script>
<title>jquery无刷新添加和删除input输入框 增加减少input框</title>
<body>
<div id="main_demo">
<a href="#" id="AddMoreFileBox" class="btn btn-info">添加</a>
<div id="InputsWrapper">
<div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" class="removeclass">删</a></div>
</div>
</div>
<script>
$(document).ready(function() {
var MaxInputs = 8;
var InputsWrapper = $("#InputsWrapper");
var AddButton = $("#AddMoreFileBox");
var x = InputsWrapper.length;
var FieldCount = 1;
$(AddButton).click(function(e)
{
if (x <= MaxInputs)
{
FieldCount++;
$(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_' + FieldCount + '" value="Text ' + FieldCount + '"/><a href="#" class="removeclass">删</a></div>');
x++;
}
return false;
});
$("body").on("click", ".removeclass",
function(e) {
if (x > 1) {
$(this).parent('div').remove();
x--;
}
return false;
})
});
</script>
</body>
</html>
