title: removing polymer elements in dart
body: <p>i am adding polymer elements. i want to remove the element(self) on click on its(own) image. as per encapsulation i will have to make the parent delete the child. but this requires requires generating polymer elements for the parent too( am i right here??). children.add not defined for polymer elements.how do i do this, i plan to do some checks before adding the polymer element to the form .</p>
  
  <p>Already read:
  <a href="https://stackoverflow.com/questions/20406328/how-to-remove-a-child-component-with-a-delete-button-in-the-child-itself">How to remove a child component with a delete button in the child itself</a></p>
  
  <p><a href="https://stackoverflow.com/questions/18971511/how-do-i-fire-a-custom-event-from-polymer-dart">How do I fire a custom event from Polymer Dart?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/19040193/how-do-you-dispatch-and-listen-for-custom-events-in-polymer?lq=1">How do you dispatch and listen for custom events in Polymer?</a></p>
  
  <p>what do i pass through dispatch event??</p>
  
  <p>init-item.html</p>
  
  <pre><code>&lt;polymer-element name="init-item" &gt;
    &lt;template&gt;
      &lt;input type="image" src="button_minus_red.gif" on-click="{{remove}}" width = "15" height ="15"&gt;
      {{Name}}&lt;br&gt; 
    &lt;/template&gt;
    &lt;script type="application/dart" src="init-item.dart"&gt;&lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>init-item.dart</p>
  
  <pre><code>@HtmlImport('init-item.html')
  import 'dart:html';
  import 'dart:async';
  import 'package:polymer/polymer.dart';
  @CustomTag('init-item')
  class PItem extends PolymerElement{
    @observable String Name='hello';
    void remove(){
      Name='';
  
    }
  </code></pre>
  
  <p>so presently on clicking the image the name attribute gets reset. but this happens only on a subsequent  click event generated from main.dart. This is due to data binding. how do i initiate two way data binding.??</p>
  
  <p>main.html (polymer tags <strong>not</strong> added inspite of suggestion. couldnt figure it out) </p>
  
  <pre><code>...
  &lt;form  id="youritems"&gt;
  &lt;/form&gt;
  ...
  </code></pre>
  
  <p>Polymer items added to above tag.</p>
  
  <p>main.dart</p>
  
  <pre><code>...
  main() async{
  .. initPolymer().then((_) {});
  }
  ..
  ...{..
  var input = new InputElement(type:"image");
  input.onClick.listen((p){
              p.preventDefault();
              populateYourPlayers(teams[i]);
            });
  }
  void populateItems(String name){
    Polymer.onReady.then((_) { 
      var pl = new Element.tag('player-item');
      pl.playerName = name;
      yourPlayer.children.add(pl);
      });
  }
  ..
  </code></pre>