zoukankan      html  css  js  c++  java
  • 【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>

  • 相关阅读:
    微服务架构技术栈选型手册(万字长文)
    Visual Studio 2013 always switches source control plugin to Git and disconnect TFS
    Visual Studio 2013 always switches source control plugin to Git and disconnect TFS
    MFC对话框中使用CHtmlEditCtrl
    ATL开发 ActiveX控件的 inf文件模板
    ActiveX: 如何用.inf和.ocx文件生成cab文件
    Xslt 1.0中使用Array
    如何分隔两个base64字符串?
    An attempt was made to load a program with an incorrect format
    JQuery 公网 CDN
  • 原文地址:https://www.cnblogs.com/zhaoyl9/p/15076364.html
Copyright © 2011-2022 走看看