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

點擊刪除，又回到最開始的界面