Hiding parsys component via javascript

If you are trying to hide the parsys component by modifying the CSS display attribute value of the parent element will not work completely at all.

<div id="divContainer">
    <cq:include path="parsys" resourceType="/libs/foundation/components/parsys" />
</div>

<script>
     // an attempt to hide container and child parsys
     $("#divContainer").hide();
</script>

The above javascript code will hide the DIV element but other parsys artifacts, such as the "Drag components or assets here" box, may appear in any corner of the screen.

I think the right and CQ5 way is to retrieve the generated artifact object using its JS library function:

var parsysComp = CQ.WCM.getEditable(/* String */ componentPath);
parsysComp.hide(); 

The next interesting question is how to get the componentPath value.
This time we have to view and analyze the HTML codes generated for the CQ page.

You will notice there is a generated <script> tag just after the closing tag of divContainer, and you will see the path value there.

<script type="text/javascript">
CQ.WCM.edit({"path":"/content/appxyx/.../jcr:content/component","dialog":"/libs/foundation/components/parsys/dialog","type":"/libs/foundation/components/parsys","editConfig":{"xtype":"editbar","listeners":{"afteredit":"REFRESH_PAGE"},"actions":[{"xtype":"tbtext","text":"Parsys Component"},{"xtype":"tbseparator"},CQ.wcm.EditBase.EDITANNOTATE]}});
</script>

You will just need to create additional utility functions to parse and retrieve the path value from this script block.