Jquery动态添加input和删除input
Posted 酸辣柠檬粉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery动态添加input和删除input相关的知识，希望对你有一定的参考价值。
<body>
<form class="layui-form" >
<div class="layui-form-item">
<label for="name" class="layui-form-label" style="width:100px">游戏名称：</label>
<div class="layui-input-block">
<input type="text" name="name" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item" id="last">
<label for="address" class="layui-form-label" style="width:100px">游戏链接：</label>
<div class="layui-input-block">
<input type="text" name="address" required lay-verify="required" lay-reqtext="小子，想偷懒？" autocomplete="off" class="layui-input">
</div>
</div>
<button type="button" id="add"class="layui-btn layui-btn-warm layui-btn-sm" style="float:right" ><i class="layui-icon layui-icon-add-1" ></i><span>继续添加</span></button><br/>
<button type="button" lay-submit lay-filter="*" class="layui-btn " style="margin-left:10px" >提交</button>
<a href="javascript:;" class="layui-btn clearlink">删除旧记录</a>
</form>
</body>
<script>
//动态添加input输入框
var form = layui.form;
var max = 6;
var x = 1;
$("#add").click(function()
if(x<max)
var str = ' <div class="layui-form-item">'+
'<label for="name" class="layui-form-label" style="width:100px">游戏名称：</label>'+
'<div class="layui-input-block">'+
'<input type="text" name="name" class="layui-input" autocomplete="off">'+
'</div>'+
'</div>'+
'<div class="layui-form-item">'+
'<label for="address" class="layui-form-label" style="width:100px">游戏链接：</label>'+
'<div class="layui-input-block">'+
'<input type="text" name="address" required lay-verify="required" lay-reqtext="小子，想偷懒？" autocomplete="off" class="layui-input">'+
'</div>'+
'</div><button type="button"class="removeclass layui-btn layui-btn-danger layui-btn-sm"style="float:right">移除</button>';
$("#last").append(str);
x++;
)
//删除动态添加的input输入框
$("body").on('click',".removeclass",function()
if(x>1)
$(this).prev('div.layui-form-item').prev('div.layui-form-item').remove();
$(this).prev('div.layui-form-item').remove();
$(this).remove();
x--;
)
//清除数据
$('.clearlink').click(function()
$.get("url('clearlink')",function()
layer.msg('成功清除所有链接');
)
)
//提交表单
form.on('submit(*)', function(data)
var names = [];
var links = [];
$('.layui-form').find('input[type="text"]').each(function(index,e)
if($(this).attr('name')=="name")
names.push($(this).val());
else
links.push($(this).val());
);
var url = "url('addlink')";
var data = 'names':names,'links':links;
$.post(url,data,function(res)
if(res.status ==200)
$('.layui-form')[0].reset();
layer.msg(res.msg);
else
layer.msg('未知错误，未添加成功');
)
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
);
</script>
以上是关于Jquery动态添加input和删除input的主要内容，如果未能解决你的问题，请参考以下文章
微信小程序之动态添加删除指定内容(view)和获取input值