Remove element by clicking the jquery link

Question

I need to make sure that when clicking on the link it removes this element tr that is the link, someone can help me?

 <?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; ?>

This is my ajax, I tried to do it this way but it deletes all tr, I know you need to access the parent element, but as I can delete the parent element of this id that the guy clicked?

$(".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);
        }
    });
});

Answer 1

The best is to use the .closest() which returns only one element, the .parents() returns all ancestral elements. That is, if you have tables within tables or .parents() will return several tr and all will be removed.

So you could do:

$(".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);
        }
    });
});

See an example working:

$(".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>

Answer 2

I managed to solve so using the method parents, I don’t know if it’s the best way:

$(".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);
        }
    });
});