Hiding Elements and Removing Elements with Javascript

Luckily, hiding and removing DOM elements with javascript is a lot less hard, and a lot less buggy, than adding them. Let's start with hiding elements:

Hiding an Element in the DOM

There are two basic ways to hide an element while still keeping it in the DOM (See Document Object Model). The first way is by changing the element's CSS display style to 'none' and the second is by changing the element's CSS visibility style to 'hidden'. Whenever either style property is set, the element will not be shown visibly on the page, however unlike removing an element completely, the semantic structure will remain within the page's DOM -- allowing you to still modify and work with it.

To bring an element back from invisibility, set display to 'block' or visibility to 'visible'. Below are some examples of what you would put inside a DOM element if you want that element hidden whenever a person clicks on it:

The difference between display='none' and visibility='hidden' has to do with the flow of the page. When you set an element to display='none', the space that that element takes up on the page is removed and replaced by other elements on the page -- changing the page flow. When you set an element to visibility='none', that element's dimensions are kept in the page space and thus page flow. See the demo below for a visual example.

Removing an Element from the DOM

As there is no removeElement() function in javascript, one has to traverse up the DOM tree to the parent element, referred to in javascript as the parentNode -- and then call the removeChild(target) function at the targeted child element. Below is an example of what you would put inside an element if you want that element removed whenever a person clicks on it:

Demo

<script type="text/javascript">
//<![CDATA[

// Remove functions
var removeEl = function (el) {
    el.parentNode.removeChild(el);
}

var removeElById = function (id) {
    var el = document.getElementById(id);
    el.parentNode.removeChild(el); // or instead of this line, put removeEl(el)
}

// Hide functions
var hideEl = function (el) {
    el.style.display = "none";
}

var hideElById = function (id) {
    var el = document.getElementById(id);
    el.style.display = "none"; // or instead of this line, put hideEl(el)
}

//]]>
</script>

<h3>DEMO</h3>
<h4>Click on a DIV to remove it:</h4>

<div class="testDiv" onclick="removeEl(this);">
    ( 1 )<br />
    Remove
</div>

<div class="testDiv" onclick="this.parentNode.removeChild(this);">
    ( 2 )<br />
    Inline Remove
</div>

<div class="testDiv" onclick="removeElById('div3');" id="div3">
    ( 3 )<br />
    Remove by Id
</div>

<hr>

<h4>Click on a DIV to hide it:</h4>

<div class="testDiv" onclick="hideEl(this);">
    ( 4 )<br />
    Hide
</div>

<div class="testDiv" onclick="this.style.display='none';">
    ( 5 )<br />
    Hide by Id
</div>

<div class="testDiv" onclick="hideElById('div6');" id="div6">
    ( 6 )<br />
    Function Call with Id
</div>

<div class="testDiv" onclick="this.style.visibility='hidden';">
    ( 7 )<br />
    Inline Hide but Keep Space
</div>