jQuery动态增加一行元素和删除一行元素

简介: jQuery动态增加一行元素和删除一行元素
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div id="timeCont"></div>
    <div class="row " id="addtimebtn">
      <div class="col-md-12 col-sm-12  col-xs-12">
        <div id="fatBtn" style="">新增</div>
      </div>
    </div>
  </body>
  <script>
    /* 新增检测时间 */
    $("#fatBtn").click(function() {
      var htm = "";
      htm += " <div class='form-group'>";
      htm += "<label class='col-md-4  col-sm-4 col-xs-4 control-label'>巡更时间<em style='color: red;'>*</em></label>";
      htm += "<div class='col-md-8  col-sm-8 col-xs-8'>";
      htm += "<input type='text' class='form-control beginTime' name='stime'  value='09:00'></input>";
      htm += "<input type='text' class='form-control endTime' name='etime'  value='17:00'></input><span class='dateDel'>删除</span></div></div>";
      $('#timeCont').append(htm);
      /* 删除时间 */
      $(".dateDel").on("click", function() {
        $(this).closest('.form-group').remove();
      })
    });
  </script>
</html>
相关文章
|
6月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
1月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
20 2
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
26 6
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
36 2
|
3月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
18 1
|
3月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
32 0
|
3月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
38 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript
jQuery及highcharts做cpu动态走势图
jQuery及highcharts做cpu动态走势图
47 1