title: How to delete the row in which a ng-click is located?
body: <p>In the following code, when I delete a customer, I want the TR row to disappear. </p>
  
  <p>What is the best way to do this? Do I need to send the row as a parameter to deleteCustomer somehow? Do I have access to the TR DOM element within AngularJS somehow? </p>
  
  <pre><code>&lt;html ng-app="mainModule"&gt;
      &lt;head&gt;
          &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;/head&gt;    
      &lt;body ng-controller="mainController" style="padding: 20px"&gt;
          &lt;div class="col-lg-5"&gt;
              &lt;table style="width: 500px" class="table-striped table-bordered table table-hover"&gt;
                  &lt;tr ng-repeat="customer in customers"&gt;
                      &lt;td style="width:50px"&gt;&lt;button ng-click="deleteCustomer(customer)"&gt;Delete&lt;/button&gt;&lt;/td&gt;
                      &lt;td style="text-align:right"&gt;{{customer.id}}&lt;/td&gt;
                      &lt;td&gt;{{customer.firstName}}&lt;/td&gt;
                      &lt;td&gt;{{customer.lastName}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-7"&gt;
              &lt;div class="panel panel-info"&gt;
                  &lt;div class="panel-heading"&gt;Logger&lt;/div&gt;
                  &lt;div class="panel-body" style="padding:0"&gt;
                      &lt;table class="table table-bordered" style="margin:0"&gt;
                          &lt;tr ng-repeat="loggedAction in loggedActions"&gt;
                              &lt;td&gt;{{loggedAction.action}}&lt;/td&gt;
                              &lt;td&gt;{{loggedAction.description}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
          var mainModule = angular.module('mainModule', []);
          function mainController($scope) {
  
              $scope.loggedActions = [];
  
              $scope.customers = [
                  {id: 1, firstName: 'Joe', lastName: 'Thompson'},
                  {id: 2, firstName: 'Hank', lastName: 'Howards'},
                  {id: 3, firstName: 'Zoe', lastName: 'Frappe'}
              ];
  
              $scope.deleteCustomer = function (customer) {
                  $scope.$emit('customerDeleted', customer);
              };
  
              $scope.$on('customerDeleted', function (event, customer) {
                  $scope.loggedActions.push({action: 'delete', description: 'Deleted customer ' + customer.firstName + ' ' + customer.lastName});
              });
          }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>