I append some rows in my table. Now I want to remove a row by clicking on a button inside of that row. My append logic works but I cannot make my remove logic work.
我在表格中添加了一些行。现在我想通过单击该行内的按钮来删除一行。我的追加逻辑有效但我无法使我的删除逻辑工作。
HTML:
HTML：
<table style="background-color:#ffe6e6;width:50%;">
<tr><th colspan="6" style="border-bottom:1px solid #AAAAAA;">Credits</th></tr>
<tr><th>User</th><th>Account</th><th>Item</th><th>Unit Price</th> <th>Quantity</th><th>Amount</th></tr>
<tr id="student_entry">
<td>
<select name="account" class="form-control" required style="width: 100px;">
<option value=""><?php echo get_phrase('select_account');?></option>
<?php
$categories = $this->db->get_where('account', array('category1' => 'EXPENSE'))->result_array();
foreach ($categories as $row):
?>
<option value="<?php echo $row['componentId'];?>"><?php echo $row['description'];?></option>
<?php endforeach;?>
</select>
</td>
<td>
<select id="item_selector_holder" name="item[]" class="form-control" style="width: 100px; margin-left: 0px;">
<option value=""><?php echo get_phrase('select_item');?></option>
<?php $categories = $this->db->get('item')->result_array();
foreach ($categories as $row):
?>
<option value="<?php echo $row['componentId'];?>"><?php echo $row['itemName'];?></option>
<?php endforeach;?>
</select>
</td>
<td>
<input type="text" style="width: 80px;" name="unitPrice" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
</td>
<td>
<input type="text" style="width: 80px;" name="unitPrice" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
</td>
<td>
<input type="text" style="width: 80px;" name="quantity" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
</td>
<td>
<span style="margin-right: 0px; padding-left: 20px">
<input onclick="deleteParentElement();" type="button" style="width: 3px; font-weight: bold;font-size: large;" value="-"/>
</span>
</td>
</tr>
<tr id="student_entry_append2"></tr>
<tr><th> <input onclick="append_credit_table_row();" type="button" style="padding: 3px 8px;font-weight: bold;font-size: large;" value=" + "/> </th><th colspan="3">Total</th><th id="ttlcr">0.00</th></tr>
</table>
JavaScript:
JavaScript的：
<script type="text/javascript">
var blank_student_entry ='';
$(document).ready(function() {
//$('#bulk_add_form').hide();
blank_student_entry = $('#student_entry').html();
for ($i = 1; $i<1;$i++) {
$("#student_entry").append(blank_student_entry);
}
});
function append_credit_table_row()
{
$("#student_entry_append2").after('<tr>' +blank_student_entry +'</tr>');
}
// REMOVING INVOICE ENTRY
function deleteParentElement()
{
$(this).parent().parent().parent().remove();
}
</script>
Please can anyone help, or suggest a solution?
请任何人可以帮忙，或建议一个解决方案？
2 个解决方案
#1
3
You can achive this using jQuery's has() function.
你可以使用jQuery的has（）函数来实现这个目的。
function deleteParentElement(item) {
$("tr").has($(item)).remove();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete1"/>
This is a row 1
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete2"/>
This is a row 2
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete3"/>
This is a row 3
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete4"/>
This is a row 4
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete5"/>
This is a row 5
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete6"/>
This is a row 6
</span>
</td>
</tr>
</table>#2
1
Here is a minimal example of dynamically creating a table row with a button that can be clicked to remove the row.
下面是一个动态创建表行的最小示例，其中包含一个可以单击以删除行的按钮。
The removal code locates the target of the event on the click handler and because the <button> is in a <td> (1) in a <tr> (2) you have to call .parent() twice.
删除代码在单击处理程序上定位事件的目标，因为
Here's a stack snippet:
这是一个堆栈代码段：
var index = 0;
$('#test_add').on('click', function() {
index += 1;
var template_row = '<tr><td><button class="row_remove_btn">Remove</button></td><td>Foo' + index + '</td><td>Bar' + index + '</td></tr>';
$('#t tbody').append(template_row);
});
$('#t').on('click', 'button.row_remove_btn', function(event) {
var row = $(event.target).parent().parent();
row.remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test_add">Add Row</button>
<table id="t">
<tbody>
</tbody>
</table>#1
3
You can achive this using jQuery's has() function.
你可以使用jQuery的has（）函数来实现这个目的。
function deleteParentElement(item) {
$("tr").has($(item)).remove();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete1"/>
This is a row 1
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete2"/>
This is a row 2
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete3"/>
This is a row 3
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete4"/>
This is a row 4
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete5"/>
This is a row 5
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete6"/>
This is a row 6
</span>
</td>
</tr>
</table>#2
1
Here is a minimal example of dynamically creating a table row with a button that can be clicked to remove the row.
下面是一个动态创建表行的最小示例，其中包含一个可以单击以删除行的按钮。
The removal code locates the target of the event on the click handler and because the <button> is in a <td> (1) in a <tr> (2) you have to call .parent() twice.
删除代码在单击处理程序上定位事件的目标，因为
Here's a stack snippet:
这是一个堆栈代码段：
var index = 0;
$('#test_add').on('click', function() {
index += 1;
var template_row = '<tr><td><button class="row_remove_btn">Remove</button></td><td>Foo' + index + '</td><td>Bar' + index + '</td></tr>';
$('#t tbody').append(template_row);
});
$('#t').on('click', 'button.row_remove_btn', function(event) {
var row = $(event.target).parent().parent();
row.remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test_add">Add Row</button>
<table id="t">
<tbody>
</tbody>
</table>