How to remove and again import link in polymer?

Question

I am importing new page using polymer, as we will click on button link will import and showing as dialog. I have close button at the dialog(at imported page), as page will import some function will execute from the polymer initialization. As i click on close button imported link should be remove and dialog will hide, again if i click so same link should be import. So the my question is how to i can import and remove link from the polymer function ? Here is my code for import link

<template is="dom-if" if="{{editDialogShow}}">
    <div id="editModal">
      <edit-product>
      <link rel="import" href="/edit-product.html">
      </edit-product>
    </div>
</template>

Here as if will true, it import link, imported link have polymer content like this.

<div id="edit">
  <paper-button on-tap='hideModal'>
  </paper-button>
  <span> some data will be here </span>
</div>

function for hideModal

hideModal: function(){
    document.getElementById("edit").remove=true;
    document.getElementById("editProductModal").style.display="none";;
},

Sorry for bad writing, first time i am using polymer please give me some idea about it. If you need any more info please know me.

Answer 1

first time i am using polymer

You need better use Polymer 2.0, because of polymer 1.0 use webcomponents v0, that is only in chrome, and now is deprecated. Polymer 2.0 are using webcomponents v1, that is acceptable by worldwide community and other browsers.

Probably you need to use polymer routing https://www.polymer-project.org/2.0/toolbox/routing. Better use default mechanism, that is has tested by a lot of developers)