3

Preciso fazer com que ao clicar no link ele remova esse elemento tr que se encontra o link, alguém pode me ajudar?

 <?php foreach ($emails as $v): ?>
   <tr>
       <td><?= $v->id; ?></td>
       <td><?= $v->email; ?></td>
       <td class="actions">
         <a href="javascript:void(0);" id="<?= $v->id; ?>" class="delete-row delete-newsletter"><i class="fa fa-trash-o"></i></a>
       </td>
    </tr>
  <?php endforeach; ?>

Esse é o meu ajax, tentei fazer desse jeito mas ele deleta todos os tr, sei que precisa acessar o elemento pai, mas como eu posso deletar o elemento pai desse id que o cara clicou?

$(".delete-newsletter").click(function(){
    var id = this.id;
    $.ajax({
       url: path +'administrador/deletarNewsletter',
       type: 'POST',
       data: {
           usuario: id
       },
       success: function (response) {
           console.log(response);
            if (parseInt(response) === 1) {
                $("tr").remove(); // Aqui ele apaga todos os tr, sendo que quero apagar o que ele clicou 
                console.log('apagado!');
            } else {
                console.log('deu merda');
            }
        },
        error: function (erro, er) {
            console.log(erro, er);
        }
    });
});

2 Respostas 2

4

O melhor é usar o .closest() que retorna apenas um elemento, o .parents() retorna todos os elementos ancestrais. Ou seja, se tiveres tabelas dentro de tabelas o .parents() irá retornar várias tr e todas serão removidas.

Assim poderias fazer:

$(".delete-newsletter").click(function(){
    var id = this.id;
    var trAtual = $(this).closest('tr');
    $.ajax({
       url: path +'administrador/deletarNewsletter',
       type: 'POST',
       data: {usuario: id},
       success: function (response) {
           console.log(response);
            if (parseInt(response) === 1) {
                trAtual.remove();
                console.log('apagado!');
            } else {
                console.log('deu merda');
            }
        },
        error: function (erro, er) {
            console.log(erro, er);
        }
    });
});

Veja um exemplo funcionando:

$(".delete-newsletter").click(function() {
  $(this).closest('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>teste</td>
    <td class="actions"><a href="javascript:void(0);" class="delete-row delete-newsletter">link</a></td>
  </tr>
  <tr>
    <td>2</td>
    <td>teste</td>
    <td class="actions"><a href="javascript:void(0);" class="delete-row delete-newsletter">link</a></td>
  </tr>
  <tr>
    <td>3</td>
    <td>teste</td>
    <td class="actions"><a href="javascript:void(0);" class="delete-row delete-newsletter">link</a></td>
  </tr>
  <tr>
    <td>4</td>
    <td>teste</td>
    <td class="actions"><a href="javascript:void(0);" class="delete-row delete-newsletter">link</a></td>
  </tr>
  <tr>
    <td>5</td>
    <td>teste</td>
    <td class="actions"><a href="javascript:void(0);" class="delete-row delete-newsletter">link</a></td>
  </tr>
  <tr>
    <td>6</td>
    <td>teste</td>
    <td class="actions"><a href="javascript:void(0);" class="delete-row delete-newsletter">link</a></td>
  </tr>
</table>

4
  • Sergio, posso inserir um exemplo visual na sua resposta? :) 31/03/2017 às 5:41
  • 1
    Olá pessoal, obrigado pela ajuda, resolveu o meu problema e ficou mais simples Sergio, valeu mesmo! 31/03/2017 às 5:49
  • @MarceloBoni sim, claro. Desculpa ter estragado a tua resposta :) Se não for exatamente igual podes colocar na mesma.
    – Sergio
    31/03/2017 às 6:00
  • @Sergio inclui um exemplo basico, espero que não se importe rs 31/03/2017 às 6:26
0

Consegui resolver assim usando o método parents, não sei se o é o melhor jeito:

$(".delete-newsletter").click(function(){
    var id = this.id;
    var trAtual = $(this);
    $.ajax({
       url: path +'administrador/deletarNewsletter',
       type: 'POST',
       data: {
           usuario: id
       },
       success: function (response) {
           console.log(response);
            if (parseInt(response) === 1) {
                trAtual.parents('tr').remove();
                console.log('apagado!');
            } else {
                console.log('deu merda');
            }
        },
        error: function (erro, er) {
            console.log(erro, er);
        }
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .