title: Angular Directive to delete a DOM element only called once
body: <p>I have a row in a modal that I want to be able to delete. New ones can also be added.</p>
  
  <p>I have a trimmed down template as follows:</p>
  
  <pre><code>&lt;div class="filter-row" delete-filter&gt;
      &lt;div class="form-group&gt;
          &lt;div class="delete-filter" ng-click="deleteFilter()"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And a directive as follows:</p>
  
  <pre><code>.directive('deleteFilter', function() {
      return {
          restrict: 'A',
          link: function(scope, element) {
  
              // Scope function to delete a filter row from the DOM
              scope.deleteFilter = function() {
                  console.log("Deleting");
                  // Remove the directive element
                  element.remove();
              };
          }
      };
  });
  </code></pre>
  
  <p>This seems to work well to delete a single filter row. But if a new row is added from this template while a row already exists, I can only delete one of the rows. If I add many rows and want to delete, I can still only delete a single row.</p>
  
  <p>To note: the console log within the function will fire every time a delete row is clicked, whether the row is removed or not.</p>
  
  <p>Any help would be appreciated. I think I am missing something but I can't figure out what.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>A new filter is added with this function from the controller:</p>
  
  <pre><code>// Function to add a new filter row in the filter modal window
  self.addFilterRow = function() {
      var newFilterRow = $compile("&lt;filter-row&gt;&lt;/filter-row&gt;")($scope);
      $("#filterForm").append(newFilterRow);
  };
  </code></pre>
  
  <p>Here is a Plunkr that may better describe the issue I'm having:</p>
  
  <p><a href="https://plnkr.co/edit/H5fvWmDLmOcnADlxELOo?p=preview" rel="nofollow">https://plnkr.co/edit/H5fvWmDLmOcnADlxELOo?p=preview</a></p>