PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Eight Weeks of Prototype: Week 1, Beginning with Prototype

Removing Elements from the DOM

The final aspect of managing DOM elements that we will look at in this article is the removal of elements. This is achieved by calling the remove() method on the element you want removed.

When you call this method, the element being removed is returned from the function call. This allows you to save the element in case you want to add it to the DOM once again.

If you want to temporarily hide an element from the user, instead of removing (by using remove()) and then re-adding it (using insert()), you should simply use hide() and show() respectively (these are methods added by Prototype as we will see in the second article in this series). You should use remove() when you want to get rid of an element (and its children) completely from the current page.

Listing 16 shows an example of using remove() to remove an element from a HTML page. When you view this HTML code in your browser, the page will be blank since the only output from the page was removed.

Listing 16 Removing an element from the DOM using remove() (listing-16.html)
<html>
    <head>
        <title>Removing an element from the DOM using remove()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="main">
            <div>Some item</div>
        </div>
 
        <script type="text/javascript">
            $('main').remove();
        </script>
    </body>
</html>

In This Article