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>

  • 相关阅读:
    献给需要购买 阿里云产品的朋友
    当硬件没问题的时候,提升电脑运行速度
    IIS网页GZIP压缩
    前端优化-如何计算白屏和首屏时间
    Javascript 思维导图
    总结get和post区别---面试用
    点击切换样式、以及点击自身移除样式效果
    各行换色
    计算器
    无缝轮播图
  • 原文地址:https://www.cnblogs.com/zhaoyl9/p/15076364.html
Copyright © 2011-2022 走看看