• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Content > Removing an Element

Removing an Element

There are several ways to remove or hide content, but the code that created the content will still remain on the page. The previous three sections showed you how to place new code on the page using JavaScript. Conversely we can remove the code from the HTML using removeChild(). However, since we’re using JavaScript, the element in question will need to have an ID associated with it (turning it into an object) in order to give the DOM something to address.

To remove an object:

function objectBeGone(objectID) {...}

Add the function objectBeGone() to your JavaScript (Code 4.13). This function uses the object ID passed to it to remove HTML code and text from the Web page being displayed. Steps 2 and 3 apply to this function.

Code 4.13. The function objectBeGone() removes the indicated content from the page.

→ Transitional//EN"
    → xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
→ xml:lang="en">
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" />
        <title>DHTML &amp; CSS Advanced |
        → Removing an Element</title>
        <script type="text/javascript"
        → language="javascript">
           function objectBeGone(objectID) {
								var removeObject = document.getElementById(objectID);
        <h2>CHAPTER VII</h2>
        <h3>The Lion and the Unicorn</h3>
        <div id="story1">
           <a href="javascript:void('')"
           → onclick="objectBeGone('story1')">
              Shred the Story
           <p><img src="Alice_7_4.jpg" alt="The
           → Lion and the Unicorn" align="left"
           → width="300" height="230"
           → border="0"/>The next moment
           → soldiers came running through the
           → wood...</p><br />


var removeObject = document.
→ getElementById(objectID);

Use getElementByID() to define a variable storing the location of the object to be removed.

→ removeChild(removeObject);

Use removeChild() to remove the object. Notice that you actually have to address this through the parent node (in this case the body), to access the node for removal.

<div id="story1">...</div>

Set up the object that will be removed. It can be any element on the screen, but will need to have the id attribute added to it with a unique value.


Add an event handler to trigger the objectBeGone() function. In this example, I used a simple link with an onclick event handler. Notice that I placed the link inside the object being removed so that the link will also disappear when the object is removed (Figures 4.21 and 4.22).

Figure 4.21. Before the link is clicked.

Figure 4.22. After the link is clicked, the code used to create the content is removed and the content disappears.

✓ Tips

  • Keep in mind that although this removes the code from the currently displayed version of the page, it has no effect on the version of the HTML document residing on the server. When the visitor reloads this page, all of the code is restored.

  • Although the result of this technique looks a lot like simply setting the display property to none, you can always set display back to something visible, but once you use removeChild() the code is actually gone from the currently displayed version of the page.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint