title: In AngularJS, how can I remove an element created using $compile?
body: <p>I've written a simple example, where I create an element dynamically using $compile. This new element has another button, with which I want to remove this element (I've read that it is good to destroy scope/elements to avoid leaks). But the function closeThisElement() is not working; please help.</p>
  
  <p>See plunker here: <a href="http://plnkr.co/edit/js7mpUMndjZEdMvRMuZk?p=preview">http://plnkr.co/edit/js7mpUMndjZEdMvRMuZk?p=preview</a></p>
  
  <p>Also reproducing part of the code below:</p>
  
  <pre><code>link: function($scope, $element) {
      function closeThisElement(){
          $element.remove();
      }
      function addComment(){
          $element.append($compile('&lt;div class="publishComment"&gt;&lt;input type="text" ng-model="contentForReply"/&gt;&lt;button ng-click="publishReply(contentForReply); closeThisElement()"&gt;Publish Reply&lt;/button&gt;&lt;/div&gt;')($scope));
      }
      $scope.addComment = addComment;
  }
  </code></pre>