Erase row of a table with javascript

Navigation
0

I have a table with several elements (partners), and I need to make the delete button work. But whenever I put the event button it deletes all 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'm using the following code to exclude 

$( "button.excluir" ).click(function() {
        $( "tr.parceiro" ).remove();
    });
    
asked by anonymous 05.12.2017 / 13:49

1 answer

1

Work with $ (this) to remove the line as follows, let's pick up which button the event is triggering with this and we will raise two levels (line level) with parent (), then we will remove just the line: 

<script>
    $( "button.excluir" ).click(function() {
        $(this).parent().parent().remove();
    });
</script>
    
05.12.2017 / 13:52
How to fill data in html input Ajax does not return Json