remove a especific tr child of a table

EDIT: I forgot to mention that those TR were created dynamically.

I’m trying to remove a especific TR that is inside a <tbody> when I click in the red X. I can identify the line I just cant remove it.

What I tried:

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

AND

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

Any tips on how to select the corret TR? Ill post what i have.

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

First of all, It’s not oneclick, but 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>

That said, the event (e) thats passed to the function can be used to get the desired output.

e.parentNode.remove()

Will get the paret node (tr) of the cell (td), and remove it as you can test here:

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>

We can use that Javascript call on the onclick itself so we don’t need the function. Change the event (e) to the current element 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>

Advertisement

Answer