zoukankan      html  css  js  c++  java
  • 前台bootstrap按钮动态添加与删除

    1.动态添加与删除按钮

    initCourse: function(){
    $("#add").click(function(){
    addCourse(this,courseInfosMax);
    });

    function addCourse(obj,sm){
    $('#courseInfos').append(
         '<div>'+
         '<div class="form-group">'+'<label class="control-label col-md-1">课程名称<span class="required"> * </span></label>'+
        '<div class="col-md-2"><input type="text" class="form-control" name="courseName" placeholder="请输入课程名称"></div>'
        +' <label class="control-label col-md-1">教师名称<span class="required"> * </span></label>'+
         '<div class="col-md-2"><input type="text" class="form-control" name="teacherName" placeholder="请输入教师名称"></div>'+
         '<div class="col-md-2"><input type="button" class="btn red stop-btn" value="删除"/></div>'+'</div>'+'</div>').find("input.stop-btn").click(function(){
        $(this).parent().parent().remove();
       $('input#add').show();
     });
     }
    }

     

    点击添加课程

     

    2.谷歌调试页面element选项下

    由于删除是在第二层的div 里面,所以是用$(this).parent().parent().remove();或者$(this).closet(.form-group).remove();可以删除

    点击删除,又回到最开始的界面

     

  • 相关阅读:
    C语言中常用的库文件
    Typora 的日志路径
    常用的 C 语言库函数
    C语言中assert断言的用法
    C语言学习摘要
    Linux 下递归赋权
    Android提升进入界面的速度
    JMeter测试工具总结
    Selenium自动化测试总结
    Android 系统启动日志
  • 原文地址:https://www.cnblogs.com/xiaolin-peter/p/7195910.html
Copyright © 2011-2022 走看看