[英]how can remove selected tbody with jquery in multiple tbody of table
I have a table and add more tbody in my table with using jquery. 我有一个表,并使用jquery在表中添加更多正文。 Now I want delete selected tbody when click delete button bot my code delete one row and not delete all of selected tbody. 现在,我想在单击“删除”按钮bot时删除选定的tbody,我的代码将删除一行,而不是删除所有选定的tbody。 How can do it? 怎么办 My code this is: 我的代码是:
<div class='row' id="table_container">
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<table class="table table-bordered table-hover" id="invoice_table">
<thead>
<tr>
<th> <input id="check_all" class="formcontrol" type="checkbox"/></th>
<td>User Information</td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> <input class="case" type="checkbox"/></td>
<td>Info</td>
</tr>
<tr>
<td> Name</td>
<td><input type="text" name="name[]" id="name_1" class="form-controlt"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastname[]" id="lastname_1" class="form-control"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-xs-12 col-sm-3 col-md-3 col-lg-3'>
<button class="btn btn-danger delete" type="button">- Delete</button>
<button class="btn btn-success addmore" type="button">+ Add More</button>
</div>
<script type="text/javascript">
var i=$('table tbody').length+1;
$(".addmore").on('click',function(){
html = '<tbody>';
html = '<tr>';
html += '<td> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> <input class="case" type="checkbox"/></td>';
html += '<td>Info</td>';
html += '</tr>';
html += '<tr>';
html += '<td>Name</td>';
html += '<td><input type="text" name="name[]" id="name_'+i+'" class="form-control"></td>';
html += '</tr>';
html += '<tr>';
html += '<td>Last Name</td>';
html += '<td><input type="text" name="lastname[]" id="lastname_'+i+'" class="form-control"></td>';
html += '</tr>';
html += '</tbody>';
$('table').append(html);
i++;
});
//to check all checkboxes
$(document).on('change','#check_all',function(){
$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});
$(".delete").on('click', function(){
$('.case:checkbox:checked').parents("tr").remove();
$('#check_all').prop("checked", false);
});
</script>
Your problem stems from this line of code: 您的问题源于以下代码行:
$('.case:checkbox:checked').parents("tr").remove();
.parents("tr")
selects ancestors of your checkbox that are <tr>
elements. .parents("tr")
选择复选框中的<tr>
元素的祖先。 Try: 尝试:
$(".case:checkbox:checked").closest("tbody").remove();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.