<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM动态添加</title>
<script type="text/javascript" src="../js/jquery/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="well well-sm">
<span class="form-tip" onclick="add_user()"><font color="#428bca">点击添加用户信息</font></span>
<span class="form-tip" onclick="delete_user()"><font color="#428bca">删除</font></span>
<div class="form-group" id="addUser">
<div class="list">
<div class="layui-form-item">
<label class="layui-form-label"><span class="red-star">*</span>会员姓名</label>
<div class="layui-input-block">
<input type="text" name="userName" lay-verify="required" maxlength="25" autocomplete="off" placeholder="请输入会员姓名" class="layui-input" value="${obj.userName}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="red-star">*</span>会员身份证号</label>
<div class="layui-input-block">
<input type="text" name="userCardNo" lay-verify="required" maxlength="25" autocomplete="off" placeholder="请输入会员身份证号" class="layui-input" value="${obj.userCardNo}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="red-star">*</span>会员手机号</label>
<div class="layui-input-block">
<input type="text" name="userMobile" lay-verify="required" maxlength="25" autocomplete="off" placeholder="请输入会员手机号" class="layui-input" value="${obj.userMobile}">
</div>
</div>
<div class="remove">删除</div>
</br>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function add_user() {
var addUser = $('#addUser');
var list=$(".list")[0].outerHTML;
addUser.append(list);
}
function delete_user() {
var $list=$(".list");
var length=$list.length;
if (!(length<=1)) {
var list=$list.last().remove();
}
}
$("#addUser").on("click",".remove",function () {
var $list=$(".list");
var length=$list.length;
if (!(length<=1)) {
$(this).parents(".list").remove();
}
})
</script>
</html>
