Q: Delete a Transcluded Element I have a custom set of directives to effectively build a nestable navigation menu through the nav tag. I previously had some questions about how to get the contents of the transcluded text. While I have figured that out, I now wonder if there is any way to delete a transcluded element so that it does not appears in the template afterwards. With This Plunker, you can see that the element is getting the text of the transcluded element. But it is still then included in the ng-transclude div. 
You will be able to see the code in the plunker, but The corresponding piece of code in the plunker is :
//Other Code Here
controller:function($scope,$element,$attrs,$transclude){
        this.parents = [];

        var el = $transclude();

        if(angular.equals($attrs.menuTitle, undefined)) {
          $attrs.menuTitle= el.text().trim().split('\n')[0];
          el.remove(); //Runs, still leaves the transcluded element
        }





        this.addSubmenu = function(parent){

          this.parents.push(parent);
        };

      },
//Other Code Here

My knowledge of the $transclude value is minimal - the piece I got working here I just kind of stumbled upon through a lot of googling and checking questions on here. 
I appreciate any help you can offer.

A: I am not sure what that plunker should show if it is working, so it's hard to tell you how to achieve it.
Hopefully I can tell you a little more about transclude though.
Actually, if you want to have a bit more control over element transclusion, then you probably want to handle it in the link function, which has the following signature
link: function (scope, element, attributes, controller, transclude)

Then, inside your link function you can use the provided transclude function to do something with the element:
transclude(scope, function(clone, scope) {
  element.append(clone);
});

The first argument is the scope that you want the transcluded elements bound to. 
Side note: the default functionality is a new (non-isolate) sub-scope of the controller in which the transcluding directive sits in. I.e. if you're using a directive with an isolate scope, then the transcluded content can't see it by default. You probably don't need to worry about this for this example though.
The second argument is a function, which takes the cloned element, and the new scope of that element. Inside this function you can append the clone to the directive's element, put it somewhere inside the template, before, or after, or just disregard it entirely.
Lastly, remember ng-transclude is a directive itself. Essentially ng-transclude is an out of the box implementation of the above (although it uses different a different scope as mentioned in the side note). As such, if you use the transclude function and you still have ng-transclude inside your template, then you will find two copies of the transcluded element. In other words, only use ng-transclude if you are not manually transcluding the content yourself.

A: You could remove the ng-transclude and do the transclution manually by using the $transclude function like this:
$transclude(function (clones) {
  if ($attrs.menuTitle === undefined) {
    $attrs.$set('menuTitle', clones.text().trim().split('\n')[0]);
  }

  var children = [];

  angular.forEach(clones, function (el) {
    // only transclude DOM node that you need here
    if (el.nodeName === 'PARENT' || el.nodeName === 'CHILD') {
      children.push(el);
    }
  })

  $element.find('div').append(children);        
});

Example Plunker: http://plnkr.co/edit/jLvhzcX0uh1xQTTqtxXu?p=preview
