Web | This Site

Learn Prototype
Prototype Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# Prototype cleanWhitespace() Method

This method removes all of element's text nodes which contain only whitespace and returns element.

Element.cleanWhitespace removes whitespace-only text nodes. This can be very useful when using standard methods like nextSibling, previousSibling, firstChild or lastChild to walk the DOM.

## Syntax:

    element.cleanWhitespace();

## Return Value:

- An HTML element.

## Example:

Consider the following example:

    <html>
    <head>
    <title>Prototype examples</title>
    <script type="text/javascript"
       src="/javascript/prototype.js">
    </script>
    <script>

    function showElements(){
       var element = $('apples');
       alert(element.firstChild.innerHTML);
    }

    </script>
    </head>

    <body>
      <ul id="apples">
         <li>Mutsu</li>
         <li>McIntosh</li>
         <li>Ida Red</li>
      </ul>

       <br />
       <input type="button" value="showElements"
                 onclick="showElements();"/>

    </body>
    </html>

That doesn't seem to work to well. Why is that ? ul#apples's first child is actually a text node containing only whitespace that sits between <ul id="apples"> and <li>Mutsu</li>.

To understand it in better way you can Try it yourself.

Now let's use cleanWhitespace function and see the result:

    <html>
    <head>
    <title>Prototype examples</title>
    <script type="text/javascript"
       src="/javascript/prototype.js">
    </script>
    <script>

    function showElements(){
       var element = $('apples');
       element.cleanWhitespace();
       alert(element.firstChild.innerHTML);
    }

    </script>
    </head>

    <body>
      <ul id="apples">
         <li>Mutsu</li>
         <li>McIntosh</li>
         <li>Ida Red</li>
      </ul>

       <br />
       <input type="button" value="showElements"
                 onclick="showElements();"/>

    </body>
    </html>

This will display following result:

    'Mutsu'

To understand it in better way you can Try it yourself.

Advertisement

Online Image Processing

Indian Baby Names