title: How to remove a child component with a delete button in the child itself
body: <p>I have  an email component (email-tag.html) that consist of a label, a select and a delete button element.</p>
  
  <p>The email-tag.html component is hosted in its parent email-view-tag.html. email-view-tag contains an add-email-button that adds the email-tag element to the DOM each time it is clicked.</p>
  
  <p>I need help in removing an added email-tag component when its delete-button is clicked. It is the compnoent that contains the delete-button that should be removed.</p>
  
  <p>The two components are shown below:</p>
  
  <p>email-tag.html</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
  
  &lt;polymer-element name='email-tag'&gt;
    &lt;template&gt;
     &lt;style&gt;
  
     .main-flex-container
     {
       display:flex;
       flex-flow:row wrap;
       align-content:flex-start;
     }
  
      .col
      {
        display:flex;
        flex-flow:column;
        align-content:flex-start;
        flex-grow:1;
      }
     &lt;/style&gt;
  
     &lt;div id='email' class='main-flex-container'&gt;
        &lt;section id='col1' class='col'&gt;
          &lt;input id=emailTxt
                 type='text'
                 list='_emails'
                 value='{{webContact.homeEmail}}'&gt;
  
          &lt;datalist id='_emails'&gt;
              &lt;template repeat='{{email in emails}}'&gt;
                &lt;option value='{{email}}'&gt;{{email}}&lt;/option&gt;
              &lt;/template&gt;
          &lt;/datalist&gt;
        &lt;/section&gt;
  
        &lt;section id='col2' class='col'&gt;
          &lt;button id='delete-email-btn' type='button' on-click='{{deletePhone}}'&gt;Delete&lt;/button&gt;
        &lt;/section&gt;
      &lt;/div&gt;
     &lt;/template&gt;
  
     &lt;script type="application/dart"&gt;
  
      import 'package:polymer/polymer.dart' show CustomTag, PolymerElement;
      import 'dart:html' show Event, Node;
  
      @CustomTag( 'email-tag' )
      class EmailElement extends PolymerElement
      {
        //@observable
        EmailElement.created() : super.created();
        List&lt;String&gt; emails = [   '', 'Home', 'Personal', 'Private', 'Work', ];
  
        void deletePhone( Event e, var detail, Node target)
        {
          //shadowRoot.querySelector('#new-phone' ).remove();
          //print( 'Current row deleted' );
        }
      }
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>email-view-tag.html</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;!DOCTYPE html&gt;
  
    &lt;link rel="import" href="email-tag.html"&gt;
  
    &lt;polymer-element name='email-view-tag'&gt;
      &lt;template&gt;
       &lt;style&gt;
  
       .main-flex-container
       {
         display:flex;
         flex-flow:row wrap;
         align-content:flex-start;
       }
  
        .col
        {
          display:flex;
          flex-flow:column;
          align-content:flex-start;
          flex-grow:1;
        }
       &lt;/style&gt;
  
        &lt;div id='email-view' class='main-flex-container'&gt;
          &lt;section id='row0'  &gt;
            &lt;button id='add-email-btn' type='button' on-click='{{addPhone}}'&gt;Add Phone&lt;/button&gt;
          &lt;/section &gt;
  
          &lt;section id='rows' class='col'&gt;
         &lt;!--    &lt;epimss-phone-header-tag id='col1' class='col'&gt;&lt;/epimss-phone-header-tag&gt; --&gt;
            &lt;/section&gt;
        &lt;/div&gt;
       &lt;/template&gt;
  
       &lt;script type="application/dart"&gt;
        import 'package:polymer/polymer.dart' show CustomTag, PolymerElement;
        import 'dart:html' show Event, Node, Element;
  
        @CustomTag( 'email-view-tag' )
        class EmailViewElement extends PolymerElement
        {
          //@observable
          EmailViewElement.created() : super.created();
  
          void addPhone( Event e, var detail, Node target )
          {
            $[ 'rows' ].children.add( new Element.tag( 'email-tag' ) );
          }
  
          @override
          void attached() {
            super.attached();
  
            $[ 'add-email-btn' ].click();
          }
        }
      &lt;/script&gt;
    &lt;/polymer-element&gt;
  </code></pre>
  
  <p>The application does execute normally and clicking the add button does add the email component. The delete button does not work - it is here I am asking for help.</p>
  
  <p>Thanks</p>