删除表的特定 tr 子项

时间：2021-07-08 14:06:35

标签： javascript html jquery

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

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

我尝试了什么：

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

和

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

关于如何选择 corret 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>

4 个答案:

答案 0 :(得分：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()

将获取单元格 (tr) 的 paret 节点 (td)，并将其删除，您可以在此处进行测试：

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>

答案 1 :(得分：0)

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

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 更通用一些...如果您决定将删除按钮置于更嵌套的结构中，这会有所作为。

答案 2 :(得分：0)

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

试试这个：

        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>

答案 3 :(得分：0)

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

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

另请注意，您的代码中存在拼写错误，请务必将 oneclick 更改为 onclick。

相关问题
最新问题