• 【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>

  • 相关阅读:
    LeetCode算法题-Reverse String II(Java实现)
    LeetCode算法题-Convert BST to Greater Tree(Java实现)
    LeetCode算法题-K-diff Pairs in an Array(Java实现)
    LeetCode算法题-Minimum Absolute Difference in BST(Java实现)
    基于Bootstrap和Knockout.js的ASP.NET MVC开发实战 关于 拦截器的 学习 部分
    基于bootstrap和knockoutjs使用 mvc 查询
    Kindle Unlimited 上线的最热书单
    基于Bootstrap和Knockout.js的ASP.NET MVC开发实战
    程序员的数学
    数学女孩
  • 原文地址:https://www.cnblogs.com/zhaoyl9/p/15076364.html
Copyright © 2020-2023  润新知