删除表的特定tr子级

Question

编辑：我忘了提到那些TR是动态创建的。

当我点击红色X时，我正试图删除<tbody>内的特定TR。我可以识别出我无法删除的行。

我尝试过的：

$('#documento_detalhe tbody').find('tr:eq(line_number)').remove();

和

$('#documento_detalhe tbody').children('tr').eq(line_number).remove();

关于如何选择正确的TR，有什么建议吗？我会把我的东西寄出去。

function remove_line(e)
{
var line_number = $(e).data('line_number');
$('#documento_detalhe tbody').children('tr').eq(line_number).remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row  margin_top_30">
<div class="col-md-6">
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">
<thead>
<tr>
<th style="width: 50px" class="text_center">Linha</th>
<th style="" class="text_center">Produto</th>
<th style="width: 80px;" class="text_center">Quantidade</th>
<th style="width: 80px;margin-left: 10px" class="text_center"></th>
</tr>
</thead>
<tbody class="text_center" id="tbody">
<tr class="text_center">
<td class="text_center">1</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">1</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="2" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">1</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="3" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

首先，它不是oneclick，而是onclick。

<!-- Wrong: oneclick -->
<td data-line_number="1" oneclick="remove_line(this)" class="text_center" style="color:red">x</td>
<!-- Fixed: onclick -->
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>

---

也就是说，传递给函数的事件(e(可以用于获得所需的输出。

e.parentNode.remove()

将获得单元(td(的排列节点(tr(，并将其删除，如您可以在此处测试的那样：

function remove_line(e) {
e.parentNode.remove()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row  margin_top_30">
<div class="col-md-6">
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">
<thead>
<tr>
<th style="width: 50px" class="text_center">Linha</th>
<th style="" class="text_center">Produto</th>
<th style="width: 80px;" class="text_center">Quantidade</th>
<th style="width: 80px;margin-left: 10px" class="text_center"></th>
</tr>
</thead>
<tbody class="text_center" id="tbody">
<tr class="text_center">
<td class="text_center">1</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">2</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="2" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">3</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="3" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
</tr>
</tbody>
</table>
</div>
</div>

---

我们可以在onclick本身上使用Javascript调用，因此我们不需要该函数。将事件(e(更改为当前元素this:

<td data-line_number="2" onclick="this.parentNode.remove()"  class="text_center" style="color:red">x</td>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row  margin_top_30">
<div class="col-md-6">
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">
<thead>
<tr>
<th style="width: 50px" class="text_center">Linha</th>
<th style="" class="text_center">Produto</th>
<th style="width: 80px;" class="text_center">Quantidade</th>
<th style="width: 80px;margin-left: 10px" class="text_center"></th>
</tr>
</thead>
<tbody class="text_center" id="tbody">
<tr class="text_center">
<td class="text_center">1</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="1" onclick="this.parentNode.remove()" class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">2</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="2" onclick="this.parentNode.remove()"  class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">3</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="3" onclick="this.parentNode.remove()"  class="text_center" style="color:red">x</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

您的行号以1开头，而eq以0开头。但你甚至不需要行号。当您将this传递给函数时，它只需使用.closest()和.remove()获得周围的tr元素即可：

function remove_line(e)
{
e.closest('tr').remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row  margin_top_30">
<div class="col-md-6">
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">
<thead>
<tr>
<th style="width: 50px" class="text_center">Linha</th>
<th style="" class="text_center">Produto</th>
<th style="width: 80px;" class="text_center">Quantidade</th>
<th style="width: 80px;margin-left: 10px" class="text_center"></th>
</tr>
</thead>
<tbody class="text_center" id="tbody">
<tr class="text_center">
<td class="text_center">1</td>
<td class="text_center">it's</td>
<td class="text_center">32</td>
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">2</td>
<td class="text_center">a nice</td>
<td class="text_center">32</td>
<td data-line_number="2" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">3</td>
<td class="text_center">day</td>
<td class="text_center">32</td>
<td data-line_number="3" onclick="remove_line(this)"  class="text_center" style="color:red">x</td>
</tr>
</tbody>
</table>
</div>
</div>

注意：closest比parentNode更通用。。。如果您决定将删除按钮放在更嵌套的结构中，这可能会有所不同。

Answer 3

只需获取父项并将其删除即可。

试试这个：

function remove_line(e) {

$(e).parent().remove();
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="row  margin_top_30">
<div class="col-md-6">
<table class="common_table" id="documento_detalhe" class="display" style="width:100%">
<thead>
<tr>
<th style="width: 50px" class="text_center">Linha</th>
<th style="" class="text_center">Produto</th>
<th style="width: 80px;" class="text_center">Quantidade</th>
<th style="width: 80px;margin-left: 10px" class="text_center"></th>
</tr>
</thead>
<tbody class="text_center" id="tbody">
<tr class="text_center">
<td class="text_center">1</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="1" onclick="remove_line(this)" class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">2</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="2" onclick="remove_line(this)" class="text_center" style="color:red">x</td>
</tr>
<tr class="text_center">
<td class="text_center">3</td>
<td class="text_center">sdfsfrewf</td>
<td class="text_center">32</td>
<td data-line_number="3" onclick="remove_line(this)" class="text_center" style="color:red">x</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 4

由于您将要删除的元素作为参数e传递，因此您可以简单地执行：

function remove_line(e) {
$(e.parentNode).remove();
}

还要注意，您的代码中有一个拼写错误，请确保将oneclick更改为onclick。