Simple JavaScript Code to Hide DIV Tag

Recently I was working on a web-based report for a project I was working on. Since I typically do not do web development, I wanted to do some work with the AJAX and the DOM. I will cover the AJAX part in a separate article. Granted, DOM and JavaScript manipulation is anything new or exciting anymore, however I don’t do much in it, so it was a welcome change of pace.

The requirements were fairly simple since this was just an experiment on my part. I wanted the form to submit via an AJAX call to a BIRT report server, display in the same page, and have the ability to remove the form, all using the DOM to manipulate the appearance on the page.

The form itself has two date input components. Rather than reinvent the wheel, I leveraged an existing HTML calendar component from here. This did everything I needed and more. Instructions for setting it up are available in the package itself.

As far as hiding the form, created a DIV tag surrounding the form element and labeled it reportForm. I then used the following function to remove the form:

function hideForm()
{
     var formElement = document.getElementById("reportForm");
     var parentElement = formElement.parentNode;

     parentElement.removeChild(formElement);
};

I assigned this function to a HTML Button component on the onClick event. In the function I could have given the form a name, and used the function documents. GetElementsByTagName, however if there is more that I want to hide than just the form, a DIV tag will group these together, so this was the method that I chose.

This in itself, isn’t really exciting. However, when I cover the AJAX call, that will be a little bit more interesting.