使用 JQuery、引导程序动态添加/删除行

Question

您好，我正在使用 jstl、bootstrap 和 jquery 编写项目、测试（英语物理等）。 我需要表格来创建带有问题和答案的测试。我坚持了一会。 我动态创建问题和答案，但是当我尝试删除问题时。它不会删除添加的答案。 以及如何将所有内容打包在一个 bean 中以将其发送到服务器，例如 --> test(int time ,string name, list(question(string name, boolean isMultAnswers ,list(answer(string answer, boolean validation)))

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(){
	jQuery('.information_json_new').before(
        '<tr>' +
		'<th>question</th>' +
		'<th>multanswer</th>' +
		'<th></th>' +
	'</tr>'+
	'<tr>' +
		'<td><input type="text" class="form-control" id="information_json_name[]" placeholder="Question"></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>'+
    '<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(){
	jQuery( this ).closest( 'tr' ).remove(); 
    jQuery(this).closest('plus').remove();
   
});
jQuery(document).on('click', '.plus', function(){
	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 * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
}
.pull-right {float: left;}
.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}
.btn-success {
	color: #fff;
	background-color: #5cb85c;
	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">
		<td></td>
		<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>'

希望这对你有用。