Polymer: Unable to remove child

Question

I'm trying to dynamically load elements into my app but I'm having trouble removing the element that I've imported.

To import my element I call:

openNewElement: function(newElement) {
        this.newElement = newElement;
        var resolvedUrl = this.resolveUrl('newelement-view' + '.html')
        this.importHref(resolvedUrl, null, null, true);
    },

This successfully imports and shows the element. Now I've tried removing the same element with many different implementations of the following:

closeNewElement: function() {
    Polymer.dom(this).removeChild('newelement-view');
},

But whether I register the node differently and/or call the removeChild(); function with an instance of the registered node, I keep getting the error:

The node to be removed is not a child of this node: [object HTMLElement]

While diving into the properties, I can see that newelement-view IS registered as a child of the parent and newelement-view has the right parent registered as it's parent. I've tried everything from the official polymer documentation and anything I could find on stack-overflow but so far, to no avail.

Any help on how to remove the child or maybe register it in a better way would be highly appreciated!

Answer 1

Here's an example on how to do it

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="remove-child">
  <template>
    <style></style>
    <div class="firstChild">first chilld</div>
    <p class="secondChild">second chilld</p>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'remove-child',
    attached: function() {
      this.removeChild(this.$$('.secondChild'));
    }
  })
</script>


<remove-child></remove-child>