Delete row from a table with javascript

Question

I have a table with several elements (partners), and I need to make the delete button work. But every time I set the event the button erases all the elements and not just the line I want.

<table id="parceiro" class="table table-bordered table-striped">
                            <thead>
                            <tr>

                                <th># ID</th>
                                <th><i class="fa fa-user-o"></i> Nome Usuário</th>
                                <th><i class="fa fa-group"></i> Perfil</th>
                                <th><i class="fa fa-sitemap"></i> Vínculo</th>
                                <th><i class="fa fa-envelope-open"></i> E-mail </th>
                                <th><i class="fa fa-phone"></i> Telefone</th>
                                <th><i class="fa fa-gears"></i> Ações</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="parceiro">
                                <td>001</td>
                                <td>Marcus Vinicius de Carvalho Botelho</td>
                                <td>Administrador</td>
                                <td></td>
                                <td>[email protected]</td>
                                <td>(85) 3275-2244</td>
                                <td>
                                    <button class="btn btn-info"><i class="fa fa-pencil"></i> Editar</button>
                                    <button class="btn btn-danger excluir"><i class="fa fa-trash-o"></i> Excluir</button>
                                </td>
                            </tr>
                            <tr class="parceiro">
                                <td>002</td>
                                <td>João Carlos Crispin</td>
                                <td>Parceiro</td>
                                <td>Café do João</td>
                                <td>[email protected]</td>
                                <td>(85) 3271-5533</td>
                                <td>
                                    <button class="btn btn-info"><i class="fa fa-pencil"></i> Editar</button>
                                    <button class="btn btn-danger excluir"><i class="fa fa-trash-o"></i> Excluir</button>
                                </td>
                            </tr>
                            <tr class="parceiro">
                                <td>003</td>
                                <td>João Carlos Crispin</td>
                                <td>Parceiro</td>
                                <td></td>
                                <td>[email protected]</td>
                                <td>(85) 3271-5533</td>
                                <td>
                                    <button class="btn btn-info"><i class="fa fa-pencil"></i> Editar</button>
                                    <button class="btn btn-danger excluir"><i class="fa fa-trash-o"></i> Excluir</button>
                                </td>
                            </tr></table>

I am using the following code to delete

$( "button.excluir" ).click(function() {
        $( "tr.parceiro" ).remove();
    });

Answer 1

Work with $(this) to remove the line as follows, let’s pick which button is being triggered the event with this and let’s go up two levels(line level) with Parent(), then yes we will remove only the line:

<script>
    $( "button.excluir" ).click(function() {
        $(this).parent().parent().remove();
    });
</script>