效果图:
点击+,在其后会添加一条记录,点击-,会删除-号所在的记录
html:
<div class="form-group">
<label class="col-sm-2 control-label">分集名称:</label>
<div class="col-sm-3">
<input th:name="name" class="form-control">
</div>
<label class="col-sm-2 control-label">节目文件:</label>
<input class="col-sm-1" name="file1" type="file" value="选择" size="20" id="file11" onchange
="uploadVideo('Video')">
<button type="button" class="add_node btn btn-primary">+</button>
</div>
js:
$(function () {
$(document).on("click",".add_node",function () {
$node ='<div class="form-group">\n' +
' <label class="col-sm-2 control-label">分集名称:</label>\n' +
' <div class="col-sm-3">\n' +
' <input th:name="name" class="form-control">\n' +
' </div>\n' +
' <label class="col-sm-2 control-label">节目文件:</label>\n' +
' <input name="file1" class="col-sm-1" type="file" value="选择" size="20" id="file11" onchange\n' +
' ="uploadVideo(\'Video\')">\n' +
'<button type="button" class="add_node btn btn-primary" >+</button>'+
' <button type="button" class="del_node btn btn-warning" >-</button>\n' +
' </div>';
$(this).parent().after($node);
});
$(document).on("click",".del_node",function(){
$(this).parent().remove();
})
});
ps:jquery生成html标签时无法再通过jquery去获取,需要用on来绑定。
$(document).on("click",'.add_node',function(){//需要这样写 });