要实现的功能如下：
image.png
点击‘add’，添加一行test元素
点击‘del’，删除此行
部分代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body class="layui-layout-body">
<form class="layui-form" style="margin-top: 100px" id="submit1">
<div class="layui-form-item">
<div class="layui-input-block">
<label><input class="layui-btn" type="button" data-method="addInput" value="add"></label>
</div>
</div>
<div id="hahaha">
<div class="layui-form-item">
<label class="layui-form-label">test:</label>
<div class="layui-input-inline">
<input type="text" placeholder="请输入标题" class="layui-input">
</div>
<input type="button" value="del" data-method="delInput" class="layui-btn">
</div>
</div>
</form>
<script src="./layui/layui.js"></script>
<script>
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer;
var active = {
addInput: function () {
var newInput =
'<div class="layui-form-item">\n' +
'\t<label class="layui-form-label">test:</label>\n' +
'\t<div class="layui-input-inline">\n' +
'\t\t<input type="text" placeholder="请输入标题" class="layui-input">\n' +
'\t</div>\n' +
'\t<input type="button" value="del" data-method="delInput" class="layui-btn">\n'+
'</div>';
$('#hahaha').append(newInput);
},
delInput: function (othis) {
othis.parent().remove();
}
};
//已加载完的元素用
$('.layui-btn').on('click', function () {
var othis = $(this), method = othis.data('method');
active[method].call(this, othis);
});
//动态加载元素用
$('#hahaha').on('click','.layui-btn', function () {
var othis = $(this), method = othis.data('method');
active[method].call(this, othis);
});
});
</script>
</body>
</html>
网友评论