【LayUI】動態新增、刪除input框
阿新 • • 發佈：2021-07-29
<!DOCTYPE html> <html> <head> <title></title> <link href="/new_website/scripts/layui/css/layui.css" rel="stylesheet" /> <script src="../../new_website/scripts/jquery1.8.3/jquery-1.8.3.js"></script> <script src="/new_website/scripts/layui/layui.all.js"></script> <script src="/new_website/scripts/vue/vue.js"></script> <script src="../../new_website/scripts/common/clipboard.min.js"></script> </head> <body> <div id="divOrderFh"> <div id="divContent"> <label class="layui-form-label"style="padding-left: 10px; margin-top: 10px">結算運費：</label> <div class="layui-input-inline"> <input type="number" id="txtSettledFreight" value="0" class="jiesuan layui-input" style="height: 30px; margin-top: 10px"> </div> <divclass="divItem"> <label class="layui-form-label">包裹1：</label> <div class="layui-input-block"> <input type="text" name="txtExpressName" placeholder="請輸入物流名稱" class="layui-input"> <span style="float: right; margin-top: -50px; cursor: pointer" onclick="divAlertInfoVue.doRemoveDiv(this)"><i class="layui-icon layui-icon-close-fill" style="color: #999; font-size: 24px"></i></span> <input type="text" name="txtExpressNumber" placeholder="請輸入物流單號" class="layui-input"> </div> </div> </div> <button type="button" class="layui-btn layui-btn-primary btn-add" onclick="divAlertInfoVue.CopyPackageControl()">+ 新增包裹</button> </div> <script type="text/javascript"> //新增包裹控制元件 CopyPackageControl: function () { var that = this; var str = '<div class="divItem">' + '<label class="layui-form-label">包裹' + (++that.packageNumber) + '：</label>' + '<div class="layui-input-block">' + '<input type="text" name="txtExpressName" placeholder="請輸入物流名稱" class="layui-input">' + ' <span style="float: right; margin-top: -50px; cursor: pointer" onclick="divAlertInfoVue.doRemoveDiv(this)"><i class="layui-icon layui-icon-close-fill" style="color: #999; font-size: 24px"></i></span>' + '<input type="text" name="txtExpressNumber" placeholder="請輸入物流單號" class="layui-input">' + '</div>' + '</div>'; $('#divContent').append(str); }, //刪除包裹控制元件 doRemoveDiv: function (e) { console.log($(e).parents('.divItem')) $(e).parents('.divItem').remove() } </script> </body> </html>