HTML containers can be used to add custom HTML and by extension, javascript, to a document. The HTML within the container, including the javascript therein, will be loaded and executed after the document has loaded, and is often a viable solution for executing custom javascript after a document loads.
Javascript can then be used to fetch another object on the page source for further manipulation, for example hiding an element on the page after a button within the container is clicked. To programmatically manipulate an element on the page using javascript, one must first retrieve a reference to that object on that page. There are multiple ways to do this, one of the most common of which is using the getElementById() function.

The getElementById() function

For example, consider the following HTML, representing several group-by elements on a document executed in presentation mode:

Using Developer Tools (included in common web browsers), we can see that the HTML that represents each groupBy element is similar to the following:

<span id="mstr83" class="mstrmojo-DropDownList mstrmojo-DocGroupBy-unit" style="display: inline;">
	Country:
	<select id="mstr83_select" class="mstrmojo-DropDownList-select mstrmojo-DocGroupBy-unit-select" style="" title="" onchange="mstrmojo.all['mstr83'].set('selected', this.options[this.selectedIndex].value);">
		<option value="u;" class="" style="">
			(All)
		</option>
		<option value="h1;8D679D3811D3E4981000E787EC6DE8A4" class="selected" style="" selected>
			USA
		</option>
		<option value="h7;8D679D3811D3E4981000E787EC6DE8A4" class="" style="">
			Web
		</option>
	</select>
</span>

var myGroupBy = document.getElementById("mstr83");

The getElementsByClassName() function

Instead, the recommended approach is to look for alternatives in the page source that help uniquely identify the elements of interest found on the page. One simple option is to leverage the class property found on many elements on the page. These values are descriptive, and often uniquely tied to common elements found on the page. For example, in the demonstration above we can see that this group-by element has the following class values tied to it:

1. mstrmojo-DropDownList-select
2. mstrmojo-DocGroupBy-unit-select

From this we can assume two things:

• All drop-down elements/select-boxes on the page are likely to have the CSS class "mstrmojo-DropDownList-select" tied to them.
• All group-by elements on the page are likely to have the CSS class "mstrmojo-DocGroupBy-unit-select" tied to them.

By extension, we can assume that the class value "mstrmojo-DocGroupBy-unit-select" is a reliable value to retrieve any group-by element from the page, if any are present. In javascript, this can be done using the getElementsByClassName function, as is demonstrated below:

var groupBys = document.getElementsByClassName("mstrmojo-DocGroupBy-unit");

Extracting a specific element from a list

In the example above, there are three group-by elements on the page. Retrieving any available group by elements using the getElementsByClassName demonstration above, will return a total of three matching HTML elements:

To further narrow down the matching elements to a specific element of interest, developer tools needs to be used to inspect the specific element on the page, and identify anything in the HTML that makes the element unique. Taking the above example further, on inspecting the HTML source for this element of interest we can see the following:

These are the observations we can make from this:

1. Elements matching the class value "mstrmojo-DocGroupBy-unit" are span elements in the page source.
2. The span holds the name of the groupBy element (e.g "Country:"), immediately followed by a select element.
3. The select element contains the groupBy elements within that groupBy selector, one option element per possible group-by element.
4. Each option element has a value property, matching the element ID, as well as an inner value of the attribute element name (e.g "USA" and "Web").

From the observations made here, there are two ways we can identify which group by in the groupBys var is the one we're looking for:

1. Look for any groupBy selector where the span holds the name of the selector we're looking for.
2. Look for any groupBy selector where one of the options is the one we're looking for.

This logic can be built using a simple for loop, to run through each matching group-by on the page and looking for a unique property to find the group-by of interest:

// get all matching HTML from the page, using the class value to try and find it
var groupBys = document.getElementsByClassName("mstrmojo-DocGroupBy-unit");

// loop through each result
for(i = 0;i < groupBys.length;i++){
	
	// retrieve the current result from the groupBys variable
	var groupBy = groupBys[i];
	
	// check the condition that tells me this is the one I'm looking for
	if(groupBy.innerText.indexOf("Country") !== -1){
		// this is the group by I want
		// do some custom logic here
		console.log("hide it from the page: ");
		groupBy.style.display = "none";
		
		// break out of the loop, unless we want to process the other groupBy selectors as well
		break;
	}
}

1. retrieve each matching HTML element from the page
2. loop through each result
3. see if the result contains the text "Country"
4. if the result contains the text "Country":
   
• perform custom logic to hide that element from the page using CSS
• break out of the loop, since we're only interested in the first match

The same approach can be used to programmatically retrieve other elements from the page using javascript, without relying on the ID value, knowing that it may change at any time.