Question

I have a layout like this and I need to reach the AreaForMapsn nodes and hide them

This is my HTML:

<div id="layout1" class="layout1_wrapper">

    <div class="grid">
        <div class="block">
            <div id="AreaForMaps1" name="AreaForMaps1">
                <div id="googlemaps1">
                </div>
            </div>
        </div>
    </div>

    <div class="grid">
        <div class="block">
            <div id="AreaForMaps2" name="AreaForMaps2">
                <div id="googlemaps2">
                </div>
            </div>
        </div>
    </div>

    <div class="grid">
        <div class="block">
            <div id="AreaForMaps3" name="AreaForMaps3">
                <div id="googlemaps3">
                </div>
            </div>
        </div>
    </div>

</div>

JavaScript:

<script>
document.getElementById("Button").onclick = function(){  
//need to reach all AreaForMapsXXX divs and hide them  
var myDiv = document.getElementById( "layout1" );
var children = document.getElementById(layout1).childNodes;

  for(i=0; i<children.length; i+=3) { 
    document.getElementById(children[i].id).style.display = "none";
  }  
}
</script>

Answer 1

There are several ways to go about it. Here’s one way.

document.getElementById("Button").onclick = function(){  
    var myDiv = document.getElementById( "layout1" );
    var divs = myDiv.getElementsByTagName("div");

    for(i=0; i<divs.length; i++) { 
      if (divs[i].id.indexOf("AreaForMaps") === 0)
          divs[i].style.display = "none";
    }  
}

Your code was only targeting nodes that are immediate children of "layout1", and was including text nodes (the tab and newline characters are represented as nodes in the DOM).

This code gets all div elements that descend from "layout1", and verifies that the first part of their ID starts with "AreaForMaps" before hiding it.

---

If the list of browsers you support only include IE8 and higher, you can do this instead:

document.getElementById("Button").onclick = function(){  
    var divs = document.querySelectorAll( "#layout1 div[id^=AreaForMaps]" );

    for(i=0; i<divs.length; i++)
        divs[i].style.display = "none";
}