JSFiddle - React, Tailwind, and code Playground

by lnrb0b

HTML

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete">delete</a></td>
</tr>
</tbody>
</table>

CSS

td {
    border:solid 1px;
    padding:4px;
}

.deleteHighlight {
    background-color:red;
    }

JavaScript

$('a').click(function(){
    var object = $(this);
    object.parent().parent().addClass('deleteHighlight', 1000, function() {
          //Fold the table row
          $(this).children().slideUp(1000, function() {
          //Delete the old row
          $(this).remove();
      });
    });
});