删除表的特定tr子级

cl25kdpy  于 2021-09-13  发布在  Java
关注(0)|答案(4)|浏览(264)

编辑:我忘了提到那些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>
ojsjcaue

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>
w8biq8rn

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

bwitn5fc

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>
pqwbnv8z

pqwbnv8z4#

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

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

还请注意,您的代码中有一个输入错误,请确保进行更改 oneclickonclick .

相关问题