How to hide specific div elements based on conditions? (without using styles)

Question

So I have 2 divs

<div id="@components">
Test
</div>

<div id="@documents">
if(documents.count > 0){
then hide div id components 
}
</div>

So essentially what I want to do is hide the "component" div within the code of the "document" div. I know I can set display:none in the style but how do I hide the component's div directly?

Answer 1

Use window.document.getElementById("@components") Get your @component div anywhere on the page, then you can use it to do what you want required operation.

<div id="@components">
Test
</div>

<div id="@documents">
if(documents.count > 0){
    //then hide div id components
    let componentsDiv = window.document.getElementById("@components");
    if(componentsDiv)
        componentsDiv.style.display = "none";
}
</div>