動態添加/刪除行與JQuery，引導

Question

你好我寫的項目，測試（英文物理等），使用jstl，bootstrap和jquery。 我需要表單來創建帶有問題和答案的測試。我堅持了一會兒。 我動態創建問題和答案，但是當我試圖刪除問題時。它不刪除已添加的答案。 （int time，string name，list）（問題（字符串名稱，布爾isMultAnswers，列表（答案（字符串答案，布爾有效性）））

jQuery('.plus').click(function(){ 
 

 
    jQuery('.information_json_plus_answer').before(
 
      '<tr>' + 
 
      '<td><input type="text" class="col-xs-5" id="information_json_name[]" placeholder="answer"></td>' + 
 
      '<td><input type="checkbox" class="checkbox" id="information_json_val[]"></td>' + 
 
      '<td><span class="btn btn-danger minus pull-right">&ndash;</span></td>' + 
 
      '</tr>'); 
 
}); 
 

 

 
jQuery('.plus-new').click(function(){ 
 
\t jQuery('.information_json_new').before(
 
     '<tr>' + 
 
\t \t '<th>question</th>' + 
 
\t \t '<th>multanswer</th>' + 
 
\t \t '<th></th>' + 
 
\t '</tr>'+ 
 
\t '<tr>' + 
 
\t \t '<td><input type="text" class="form-control" id="information_json_name[]" placeholder="Question"></td>' + 
 
\t \t '<td><input type="checkbox" class="checkbox" id="information_json_val[]"></td>' + 
 
\t \t '<td><span class="btn btn-danger minus pull-right">&ndash;</span></td>' + 
 
    '</tr>'+ 
 
    '<tr class="information_json_plus">'+ 
 
     '<td></td>'+ 
 
     '<td></td>'+ 
 
     '<td><span class="btn btn-success plus pull-right">+</span></td>'+ 
 
    '</tr>' 
 
    ); 
 
    
 
}); 
 

 
jQuery(document).on('click', '.minus', function(){ 
 
\t jQuery(this).closest('tr').remove(); 
 
    jQuery(this).closest('plus').remove(); 
 
    
 
}); 
 
jQuery(document).on('click', '.plus', function(){ 
 
\t jQuery(this).closest('tr').before(
 
     '<tr>' + 
 
      '<td><input type="text" class="form-control" id="information_json_name[]" placeholder="answer"></td>' + 
 
      '<td><input type="checkbox" class="checkbox" id="information_json_val[]" placeholder="chbox"></td>' + 
 
      '<td><span class="btn btn-danger minus pull-right">&ndash;</span></td>' + 
 
     '</tr>' 
 
     ); 
 
});

.information_json, .information_json * { 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 
.table { 
 
\t width: 100%; 
 
\t max-width: 100%; 
 
\t margin-bottom: 20px; 
 
\t background-color: transparent; 
 
\t border-spacing: 0; 
 
\t border-collapse: collapse; 
 
} 
 
.pull-right {float: left;} 
 
.form-control { 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 34px; 
 
\t padding: 6px 12px; 
 
\t font-size: 14px; 
 
\t line-height: 1.42857143; 
 
\t color: #555; 
 
\t background-color: #fff; 
 
\t background-image: none; 
 
\t border: 1px solid #ccc; 
 
\t border-radius: 4px; 
 
\t -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
\t box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
 
\t -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
 
\t -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
\t transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
} 
 
.btn { 
 
\t display: inline-block; 
 
\t padding: 6px 12px; 
 
\t margin-bottom: 0; 
 
\t font-size: 14px; 
 
\t font-weight: 400; 
 
\t line-height: 1.42857143; 
 
\t text-align: center; 
 
\t white-space: nowrap; 
 
\t vertical-align: middle; 
 
\t -ms-touch-action: manipulation; 
 
\t touch-action: manipulation; 
 
\t cursor: pointer; 
 
\t -webkit-user-select: none; 
 
\t -moz-user-select: none; 
 
\t -ms-user-select: none; 
 
\t user-select: none; 
 
\t background-image: none; 
 
\t border: 1px solid transparent; 
 
\t border-radius: 4px; 
 
} 
 
.btn-danger { 
 
\t color: #fff; 
 
\t background-color: #d9534f; 
 
\t border-color: #d43f3a; 
 
} 
 
.btn-success { 
 
\t color: #fff; 
 
\t background-color: #5cb85c; 
 
\t border-color: #4cae4c; 
 
} 
 
.plus-new { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table information_json"> 
 

 
    <tr class="information_json_new"> 
 
\t \t <td></td> 
 
\t \t <td colspan="2"><span class="btn btn-success plus-new pull-right">+</span></td> 
 
    </tr> 
 
    
 
</table>

Answer 1

的問題是你有兩個TR的被堆疊和你只告訴它刪除一個（最近）。一個簡單的解決將是移動的問題和多答案HTML進入與文本框和按鈕tr或快速和髒的修復將是：

嘗試改變：

jQuery(document).on('click', '.minus', function(){ 
    jQuery(this).closest('tr').remove(); 
    jQuery(this).closest('plus').remove(); 
}); 

要這樣：

jQuery(document).on('click', '.minus', function(){ 
      $(this).closest('tr').remove(); 
      $(this).closest('tr.question').remove(); 
      $(this).closest('plus').remove(); 
}); 

，並添加：

class="question" 

對此TR：

jQuery('.information_json_new').before(
    '<tr>' 

希望這個作品送給你。