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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2012
    Posts
    121
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Please help about removeChild

    I can not understand what's wrong with the below. Can not remove child in Crome. Anyone help
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Add & Delete Child</title>
    </head>
    <body>
    <script type=text/javascript>
    var childID=0;
    function addChild()
    {
      var parent = document.getElementById('myDiv');
      var newChild = document.createElement('div');
    
      childID=childID+1;  
      var childName = 'Div'+childID; // set index for child for deleting later
      newChild.setAttribute('id',childName);
      newChild.innerHTML = 'Element '+childName+' has been added! <a href=\'#\' onclick=\'removeElement('+childName+')\'>Remove element "'+childName+'"</a>';
      parent.appendChild(newChild);
    }
    function removeElement(divName)
    {
      var parent = document.getElementById('myDiv');
      var oldDiv = document.getElementById(divName);
      parent.removeChild(oldDiv);
    }
    </script>
    
    <p><button onclick="addChild();">Add New Elements</button></p>
    <div id="myDiv"> </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    121
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I have found down the error. Thanks

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by docco View Post
    I can not understand what's wrong with the below. Can not remove child in Crome. Anyone help
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Add & Delete Child</title>
    </head>
    <body>
    <script type=text/javascript>
    var childID=0;
    function addChild()
    {
      var parent = document.getElementById('myDiv');
      var newChild = document.createElement('div');
    
      childID=childID+1;  
      var childName = 'Div'+childID; // set index for child for deleting later
      newChild.setAttribute('id',childName);
      newChild.innerHTML = 'Element '+childName+' has been added! <a href=\'#\' onclick=\'removeElement('+childName+')\'>Remove element "'+childName+'"</a>';
      parent.appendChild(newChild);
    }
    function removeElement(divName)
    {
      var parent = document.getElementById('myDiv');
      var oldDiv = document.getElementById(divName);
      parent.removeChild(oldDiv);
    }
    </script>
    
    <p><button onclick="addChild();">Add New Elements</button></p>
    <div id="myDiv"> </div>
    
    </body>
    
    </html>
    I suggestion putting your script in the <head>, not the <body>. Beyond that, sorry, I'm not sure.

    Raymond

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by Raymond Cheyne View Post
    I suggestion putting your script in the <head>, not the <body>. Beyond that, sorry, I'm not sure.

    Raymond
    JavaScript belongs at the bottom of the body not in the head. This is particularly true of scripts like this that use document object model commands where the script needs to come AFTER the parts of the HTML that it is referencing.

    The only script I know of that needs to go in the head of a web page is the one that tests if the page is about to load inside a frame and which reloads the page outside of the frame. All other scripts run better at the bottom of the page where in most cases you can then remove references to onload and so reduce the chances of script clashes.

    Placing scripts in the head was common back in the Netscape 4 days prior to JavaScriptbeing able to properly interact with the HTML. It became far less efficient to put the scripts in the head when the DOM was introduced in more modern browsers such as IE5.
    Last edited by felgall; 09-12-2012 at 10:45 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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