Jquery动态添加input和删除input

最新推荐文章于 2026-05-13 16:26:47 发布

原创最新推荐文章于 2026-05-13 16:26:47 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的游戏链接动态添加与管理的表单。通过JavaScript动态添加和删除游戏名称及链接的输入框，同时具备提交和清除已有记录的功能。适用于需要批量管理游戏资源的场景。

<body>

</div>

</div>

<a href="javascript:;" class="layui-btn clearlink">删除旧记录</a>

</form>

</body>

//动态添加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 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>