SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    removeChild doesn't remove in IE

    In one of the pages in my application, I need to create several table rows using JavaScript and provide users the ability to remove certain rows. I am using removeChild to remove the rows from the table. This works in Firefox and Opera but not IE. What can I do to make it work in IE?

    I have reproduced a simple JavaScript block that behaves the same way. Any help will be appreciated.

    HTML Code:
    <html>
    <head><title></title></head>
    <body>
    
    <div id="block"></div>
    
    <script type="text/javascript">
    
    function Initialize()
    {
    	var element = document.getElementById('block');
    
    	for (i = 1; i < 6; i++)
    	{
    		var e = document.createElement('div');
    		e.setAttribute('id', 'element' + i);
    		e.innerHTML = 'Option ' + i;
    
    		var l = document.createElement('a');
    		l.setAttribute('href', '#');
    		l.setAttribute('onclick', 'RemoveMe(' + i + ');');
    		l.innerHTML = ' remove';
    		
    		e.appendChild(l);
    		element.appendChild(e);
    	}
    }
    
    function RemoveMe(id)
    {
    	var elementid = 'element' + id;
    	var element = document.getElementById(elementid);
    	element.parentNode.removeChild(element);
    }
    
    Initialize();
    </script>
    
    </body>
    </html>

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't use setAttribute to attach an event listener. Do it like this:

    Code Javascript:
    [...]
    l.onclick = function () { RemoveMe (i); };

    Remember to return false in your RemoveMe function.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That won't work, since the value of i will always be 6.

    Instead, you can find the target element from the Event object that is passed to the event handler (using the .target property in Opera/Firefox/Safari or the .srcElement property in IE).
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Instead, you can find the target element from the Event object that is passed to the event handler (using the .target property in Opera/Firefox/Safari or the .srcElement property in IE).
    I don't know if it a lot to ask, but can you give me a code example? Thanks.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <!DOCTYPE type PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <title>Remove Child</title>
        <script type="text/javascript">
          function Initialize() {
              var element = document.getElementById('block');
     
              for (var i = 1; i < 6; ++i) {
                  var e = element.appendChild(document.createElement('div'));
                  e.setAttribute('id', 'element' + i);
                  e.appendChild(document.createTextNode("Option " + i));
     
                  var l = e.appendChild(document.createElement('a'));
                  l.setAttribute('href', '#');
                  l.appendChild(document.createTextNode(" remove"));
                  l.onclick = RemoveMe;
              }
          }
     
          function RemoveMe(e) {
              e = e || window.event;
              var element = e.target ? e.target : e.srcElement;
              element.parentNode.parentNode.removeChild(element.parentNode);
              if (e.preventDefault) {
                  e.preventDefault();
                  e.stopPropagation();
              } else {
                  e.returnValue = false;
                  e.cancelBubble = true;
              }
          }
        </script>
      </head>
      <body>
        <div id="block"></div>
     
        <script type="text/javascript">
          Initialize();
        </script>
    </body>
    </html>
    Tested in Opera 9.2, Firefox 2.0 and IE 6.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot. I appreciate it.


Bookmarks

Posting Permissions

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