删除通过$ compile添加的元素

Question

我有一个通过fa-plus按钮添加行的指令。我想通过fa-minus按钮删除该行。

(function(angular) {


 'use strict';
   angular.module('app').directive('addSearchRow', addSearchRow);
   function addSearchRow($compile) {
     return {
       controller: function($scope, elm, scope) {
         $scope.removeSearchRow = function() {
           console.log('removeSearchRow');
           //$scope.$destroy();
           elm.after($compile('')(scope));
         };
       },
       link: function (scope, elm) {
         scope.addSearchRow = function(){
           console.log(elm);
           elm.after($compile('<add-search-row ng-model="data.advancedSearchType"></add-search-row>')(scope));
         };
       },
       restrict: 'E',
       template: '<div class="input-group-btn advanced-search-select-group"><select class="form-control cat-1"><option ng-repeat="advancedSearchType in advancedSearchType" value="{{advancedSearchType.name}}" ng-bind="advancedSearchType.name"></option></select><select class="form-control cat-2"><option ng-repeat="isIsNot in isIsNot" value="{{isIsNot.name}}" ng-bind="isIsNot.name"></option></select><input type="text" class="form-control advanced"/><a ng-click="removeSearchRow()" class="clickable advanced"><i class="fa fa-minus"></i></a><a ng-click="addSearchRow()" class="clickable advanced"><i class="fa fa-plus"></i></a></div>',
     };
   }

 })(angular);

我的想法是我需要破坏元素，但我不太确定最好的方法。从DOM中删除已通过$compile添加的元素的最佳方法是什么？理想情况下，我想使用相同的指令。