点击增加按钮，添加input，超过三个则增加按钮隐藏-阿里云开发者社区

点击增加按钮，添加input，超过三个则增加按钮隐藏

2023-11-17 90

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 点击增加按钮，添加input，超过三个则增加按钮隐藏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="row">
                <div class="col-md-12 col-sm-12  col-xs-12">
                  <div class="form-group">
                    <label class="col-sm-4 control-label">检测时间 <em style="color: red;">*</em></label>
                    <div class="col-sm-4" style="width: 109px;">
                      <input type="text" value="09:00"
                        class="form-control sleepStart"></input>
                    </div>
                    <div class="col-sm-4" style="width: 109px;">
                      <input type="text" value="17:30"
                        class="form-control sleepStop"></input>
                    </div>
                  </div>
                </div>
              </div>
              <div id="opts"></div>
              <div class="row " id="addtimebtn">
                <div class="col-md-12 col-sm-12  col-xs-12">                  
                    <div id="fat-btn" style="">新增检测时间</div>
                </div>
              </div>
  </body>
  <script type="text/javascript">
  /* 新增检测时间 */
    $("#fat-btn")
        .click(
            function() {
              var htm = "";
              htm += "<div class='row'>";
              htm += "<div class='col-md-12 col-sm-12  col-xs-12'>";
              htm += "<div class='form-group'>";
              htm += "<label class='col-sm-4 control-label'>检测时间</label>";
              htm += "<div class='col-sm-4' style='width: 109px;'>";
              htm += "<input type='text' value='09:00' class='form-control sleepStart'></input></div>";
              htm += "<div class='col-sm-4' style='width: 109px;'>";
              htm += "<input type= 'text' value='17:30' class='form-control sleepStop'></input>";
              htm += "</div></div></div></div>";
              $('#opts').append(htm);
              //统计区域时间选择
              /*$(".sleepStart").hunterTimePicker();
              $(".sleepStop").hunterTimePicker();*/
              if ($('.sleepStart').length > 2) {
                $('#addtimebtn').remove();
              }
            });
  </script>
</html>