CODEWITHSUNDEEP
javascriptjqueryhtml
DragonStyle
DragonStyle

Reputation: 145

Delete visualy a table row with jQuery

I have a html construction that display Data from a MySQL-Table:

<tr>
  <td><? echo $rowAL[1]; ?></td>
  <td><span class="badge <? echo $cc; ?>"><? echo $rowAL[4]; ?></span></td>
  <td><? echo $rowAL[10]; ?></td>
  <td style="text-align: center;"><a href="#" class="chooseTask" task-id="<? echo $rowAL[0]; ?>"><i class="fa fa-pencil-square-o"></i></a></td>
  </td>
</tr>

If I click on link in the last column, I open a div underneath this table with Ajax (jQuery) to Display the whole dataset. In the div I have a button to delete this selected Data from the MySQL-Table. The link on the delete button is jQuery driven to call the delete handler (PHP). Ok so thats works well.

What I want know is to visually delete the row from the table. But I don't get it, how can I find and call the right row in where I clicked before to call the dataset. I hope you understand what I mean.

So what I habe to write in my done-function?

The JS to open the Dataset ist here:

$(function(){

    $('.chooseTask').click(function(e){






        $.ajax({
            type: 'get',
            url: 'handle.selectTask.php',
            data: 'id='+elem.attr('task-id'),
            beforeSend: function() {
                //parents.animate({'backgroundColor':'#00a65a'},300);
                //parents.animate({'backgroundColor':'transparent'},300);
                //elem.animate({'backgroundColor':'#00a65a'},400);
                //elem.animate({'backgroundColor':'#367fa9'},400);


            }
            }).done(function (data) {


        // Neue Items anfügen:
        $('#message').html(data);
        $( "#progress" ).fadeIn( 10 ).delay( 200 ).fadeOut( 10 );



}).fail(function() {
    // Bei Fehler
    alert("Fehler!");
}) 
});

});

Upvotes: 1

Views: 76

Answers (1)

justinledouxweb
justinledouxweb

Reputation: 1357

You can put an event listener on the delete button, find the parent row, and remove it.

$( '#your-table' ).on( 'click', 'a.delete-button', function ( e ) {
  e.preventDefault();

  var $deleteButton = $( this ),
      $row = $deleteButton.closest( 'tr' );

  $row.remove();
})

Upvotes: 4

Related Questions