• 【LayUI】动态添加、删除input框


    <!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>
                <div class="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>

  • 相关阅读:
    redis在实践中的一些常见问题以及优化思路(包含linux内核参数优化)
    分库分表基本概念
    产品经理黑话
    在linux虚拟机中安装部署MySQL数据库
    计算机专业本科自考
    在项目中重新搭建一套读写分离+高可用+多master的redis cluster集群
    扔掉工具类,Mybatis一个简单配置搞定数据加密解密!
    两台Linux系统之间传输文件使用scp的解决方案
    博客园积分排名前3000名
    内网穿透在家远程连接公司电脑<强烈收藏,早晚用得上>
  • 原文地址:https://www.cnblogs.com/zhaoyl9/p/15076364.html
Copyright © 2020-2023  润新知