www.webdeveloper.com
Results 1 to 4 of 4

Thread: removeChild()

  1. #1
    Join Date
    Jul 2009
    Posts
    73

    removeChild()

    I am trying to right a code that will delete an element. For example i am attempting to try below to delete the "p" element in this document. Can anyone help me...Aslo to expand on this...is they a way to do it so that it occurs automaticaly at a future date..


    <html>
    <script type="text/javascript">
    function removeChild('p');

    </script>
    <body>
    <p>bubba</p>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    There are several basic concepts which you need to understand in javascript.

    First at all: the reference. Before trying to modify the status of an element, you need to refer it, a way or another. In javascript there are several methods to refer an element: by id, by name, by tagname, by the absolute or relative position in the DOM tree. In your case, probably the easier way to refer that paragraph element is by its tagname: It is the first <p><p/>element
    Code:
    var myElement=document.getElementsByTagName('p')[0];
    Second: you must learn the javascript methods. For instance: removeChild(): the syntax is:
    Code:
    theParentNode.removeChild(theNode)
    where theNode and theParentNode should be the references of the element and its parent node.

    Third. In javascript the statements are nested in functions, functions are fired by events which follows the user's action. Now: which could be the event in your case?

    Anyway, here's a basic example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function removeEl(tag,n){
    if(!document.getElementsByTagName(tag)[n]){return}//catch the error in case there is no element
    var el=document.getElementsByTagName(tag)[n];
    el.parentNode.removeChild(el);
    }
    </script>
    </head>
    <body>
    <p>text</p>
    <p>other text</p>
    <br>
    <br>
    <span onclick="removeEl('p',0)">Remove the first paragraph</span>
    </body>
    </html>

  3. #3
    Join Date
    Jul 2009
    Posts
    73
    Thank you for braking this down for me. Im just starting javascript and it is to say the least stretching me...however i have another ignorant question to ask...

    in your code function removeEl(tag,n){ was does the 'n' respresent? could it have been done without it?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The n, in my code, is the passed argument of the index. Since getElementsByTagName(tag) returns a collection of elements, not a single element the index is necessary to specify which element is to me removed.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles