JSFiddle - React, Tailwind, and code Playground

by Leo Javier

HTML

<div class="field" ng-app="App">
    <input type="text" ng-model="model">
    <table ng-controller="Controller">
        <tr ng-repeat="item in table | filter:model">
            <td ng-class="item.style"><i ng-class="item.badge"></i> {{item.name}}</td>
        </tr>
    </table>
</div>

CSS

body{
    font-family:arial;
}
a{
    text-decoration:none;
    color:red;
}

table{
width:300px;
}

td{
    border:thin solid #CCC;
    padding:10px;
    
}

tr{
 position:relative   
     width:300px;
}

.deleted:after{
    content:'DELETED';
    position:absolute;
    top:0;
    left:0;
    background:red;
    width:300px;
    color:#FFF;
    text-align:center;
    line-height:40px;
}

JavaScript

var App = angular.module('App', []);
App.controller('Controller', function($scope, $timeout){
	$scope.table = [
        {name : 'Dan', 
         badge: 'fa fa-futbol-o'
        },
        {name : 'Orlando', 
         badge: 'fa fa-bicycle'},
        {name : 'Dany', 
         badge: 'fa fa-bolt'}
   ];
    
    $scope.delete = function(item, index){
        item.deleted = true;
        item.style = 'deleted';
        
        function destroy() {
    	$scope.table.splice(index, 1)
        }
        
        $timeout(function(){destroy();}, 3000);
    }
})