删除表的特定tr子级

cl25kdpy 于 2021-09-13 发布在 Java

关注(0)|答案(4)|浏览(265)

编辑：我忘了提到那些tr是动态创建的。
我试图删除一个特殊的tr，它位于 <tbody> 当我点击红色的x。我能识别出那条线，但我不能把它移走。
我尝试的是：

$('#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>

jquery JavaScript Html

来源：https://stackoverflow.com/questions/68303219/remove-a-especific-tr-child-of-a-table

4条答案

按热度按时间

ojsjcaue1#

首先，它不是 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()

将获得paret节点( tr )牢房( 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 所以我们不需要这个函数。改变事件( 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>

赞(0）回复(0）举报 2021-09-13

w8biq8rn2#

行号从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 ... 如果您决定将“删除”按钮放在一个更嵌套的结构中，这可能会有所不同。

赞(0）回复(0）举报 2021-09-13

bwitn5fc3#

简单地说，你可以得到父母和删除它。
试试这个：

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>

赞(0）回复(0）举报 2021-09-13

pqwbnv8z4#

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

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

还请注意，您的代码中有一个输入错误，请确保进行更改 oneclick 到 onclick .

赞(0）回复(0）举报 2021-09-13

我来回答

删除表的特定tr子级

4条答案

相关问题

热门标签

最新问答