Strip off parent component tag

Question

I have declared a <table> element in a HTML-template and put a custom-component in it's row, like this:

<table>
  <thead>
    ....
  </thead>
  <tbody>
    <tr>
      <CustomComponent></CustomComponent>
    </tr>
  </tbody>
</table>

CustomComponent contains some <td>s.
i want to strip <CustomComponent></CustomComponent> off, So that internal <td>s be the first children of <tr>.

Possible duplicate of [Angular2 : render a component without its wrapping tag](https://stackoverflow.com/questions/38716105/angular2-render-a-component-without-its-wrapping-tag) — k.s., Jul 02 '18 at 10:15

score 0 · Answer 1 · answered Jul 02 '18 at 10:23

I tried and tested the below, hope it should work.

   // select element to unwrap
    var el = document.getElementsByTagName("CustomComponent");

    // get the element's parent node, if it returns array then take the first index
    var parent = el[0].parentNode;

    // move all children out of the element
    while (el[0].firstChild) {
        parent.insertBefore(el[0].firstChild, el[0]);
    }

    // remove the empty element
    parent.removeChild(el[0]);

Happy Coding!

Strip off parent component tag

1 Answers1