JQuery、ブートストラップを使用して行を動的に追加/削除する

Question

こんにちは私は、jstl、bootstrap、jqueryを使って、プロジェクト（英語物理など）を書いています。 質問と回答でTestを作成するにはフォームが必要です。私は一瞬だけつづいた。 質問と回答を動的に作成しますが、質問を削除しようとしています。追加された回答は削除されません。 また、1つのBeanにすべてのものをパックする方法 - > test（int time、string name、list（question（string name、boolean isMultAnswers、list（answer（string answer、boolean validity）））

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

問題は、あなたが積層されている2つのtrのを持っているし、あなただけの（最も近い）ものを削除するように指示されている。簡単な修正は、質問とマルチアンサーのhtmlを移動するだろうですテキストボックスとボタンを使ってtrに追加するか、すばやく汚れた修正は次のようになります：

変更してみてください：

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

および追加：

class="question" 

このTRへ：これに

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

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

うまくいけば、これはあなたのために動作します。