Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2009
    Posts
    264
    Thanks
    24
    Thanked 1 Time in 1 Post

    Need help with adding / removing parent object..

    Hi all I have been doing research on parent object nodes & child nodes. I have a small problem with the code I made. What I need for it to do is depending on which link u click, it adds or deletes the node specified in the function. And the name of the div shouldnt matter as it should be used when clicking on the link <a href="javascript:addevent('divname');">Add Element</a>.

    for instance:

    "Add element" | "Delete element"

    if u click on the add element, then it adds an element, and if u click on the delete element, then it deletes the added element.

    Here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Add/Remove child: Javascript</title>
    <style type="text/css" media="screen">
      .Welcome {
        background: #FFE2AF;
        color: #000;
        border: 2px solid #ccc;
        padding: 1em;
      }
    </style>
    </head>
    
    <script>
    
     var num = 0;
    
    function addEvent(myDiv) {
    
      var ni = document.getElementById(myDiv);
      var numi = document.getElementById('theValue');
    
       num++;
       numi.value = num;
    
      var divIdName = "my"+num+"Div";
      var newdiv = document.createElement('div');
      
       newdiv.setAttribute("id",divIdName);
       newdiv.innerHTML = "Element Number " + num + " has been added! <a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\">Remove the element &quot;"+divIdName+"&quot;</a>";
    
        ni.appendChild(newdiv);
    }
    
    function removeElement(divNum) {
      
      var d = document.getElementById(divNum);
      var olddiv = document.getElementById(divNum);
      
      d.removeChild(olddiv);
       num -= 1;
    }
    </script>
    
    <body>
      <div class="welcome">
      <H1>Welcome!</H1>
      </div>
    	<input type="hidden" value="0" id="theValue" />
    	<p><a href="javascript:;" onClick="addEvent('myDiv');">Add Some Elements</a></p>
    	<p><a href="javascript:;" onClick="addEvent('myDiv1');">Add Some Elements</a></p>
    	<div id="myDiv"></div>
    	<div id="myDiv1"></div>
    </body>
    </html>
    ANY help is GREATLY appreciated!

    Thanks!

    ~SI~
    Last edited by ShadowIce; 05-18-2009 at 12:12 AM.

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    The method removeChild does just that -- it removes a child element. This means you will have to call it on the parent of the element you wish to remove, so you have to change
    Code:
    d.removeChild(olddiv);
    to
    Code:
    d.parentNode.removeChild(olddiv);
    or, better yet, remove the "olddiv" part altogether, as it's the same thing as "d" in your code:
    Code:
    d.parentNode.removeChild(d);
    Also, instead of using that counter to keep tracks of the created elements via their ids, you could just abandon the id part, which is a bit awkward, altogether, and instead keep track of the created elements by putting them in an array. Your code could look something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Add/Remove child: Javascript</title>
    <script type="text/javascript">
    var createdElements = [];
    
    function addElement(parentNodeId) {
    	var parentNode = document.getElementById(parentNodeId);
    	var newdiv = document.createElement('div');
    	createdElements.push(newdiv);
    	newdiv.innerHTML = "Element Number " + createdElements.length + " has been added! <a href=\"#\" onclick=\"removeElement(this.parentNode)\">Remove the Element Number " + createdElements.length + "</a>";
    	parentNode.appendChild(newdiv);
    }
    
    function removeElement(element) {
      element.parentNode.removeChild(element);
      createdElements.splice(createdElements.indexOf(element), 1);
    }
    </script>
    </head>
    
    <body>
    	<p><a href="#" onclick="addElement('myDiv');">Add Some Elements</a></p>
    	<p><a href="#" onclick="addElement('myDiv1');">Add Some Elements</a></p>
    	<div id="myDiv"></div>
    	<div id="myDiv1"></div>
    </body>
    </html>
    Last edited by venegal; 05-18-2009 at 01:17 AM.

  • Users who have thanked venegal for this post:

    ShadowIce (05-18-2009)

  • #3
    Regular Coder
    Join Date
    Apr 2009
    Posts
    264
    Thanks
    24
    Thanked 1 Time in 1 Post
    Once again, thank you for your time and for your patience with me Thanks to you, my project is almost complete!

    Thank you so much!

    ~SI~


  •  

    Posting Permissions

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