前台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();可以删除

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

 

转载于:https://www.cnblogs.com/xiaolin-peter/p/7195910.html