Remove element when clicking the link with jquery

Question

Remove element when clicking the link with jquery

Navigation

#1 by (4 votes)
#2 by (0 votes)

3

I need to make that when clicking the link it removes this tr element that is the link, can someone 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 I need to access the parent element, but how can I delete the parent element of this id that the guy clicked on?

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

javascript jquery ajax

asked by anonymous 31.03.2017 / 07:19

2 answers

0

I was able to resolve this by using the parents method, I do not know if this is 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);
        }
    });
});

31.03.2017 / 07:34

Send e-mail with STARTTLS port 587 How to return cells based on identifier in R

score 4 · Accepted Answer

It's best to use .closest() that returns only one element, .parents() returns all ancestral elements. That is, if you have tables inside tables the .parents() will return several tr and all will be removed.

So you could do it:

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