SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can't remove child element in ie6 [SOLVED]

    I'm having problems removing an element in ie6. I can add the elements fine, but when I try to remove them, its bombing on me.

    here's what I'm trying to do, I have a form which allows for dynamic amount of file uploads to be on the form..."pretty similar to gmails file attachments"

    my javascript for when I add a new upload box and the code for trying to remove that box...it works FINE in firefox(go figure)

    my page initially starts like this
    Code:
    <div id="uploads"></div>
    after I click to add another file the code will look like this
    Code:
    <div id="uploads">
      <div id="con1">
        <input id="upload1" name="upload[]" type="file" >
        <span id="remove1">remove</span>
      </div>
    </div>
    and each subsequent click will continue to add a new container (con1, con2, con3, etc..) which holds the input field and remove link

    Code:
    function addFileUpload(e) {
    	//	If we are appending the first upload, change the text.
    	if (actualCount == 0) {
    		document.getElementById( 'af' ).innerHTML = "Attach another file";
    		
    		var uploadButton = document.createElement( 'input' );
    		uploadButton.type	= 'button';
    		uploadButton.name	= 'loadFiles';
    		uploadButton.id		= 'loadFiles';
    		uploadButton.value	= 'Upload';
    		document.getElementById( 'actions' ).appendChild(uploadButton);
    	}
    
    	//	Create the new file input field.
    	var newFile		= document.createElement( 'input' );
    	newFile.type	= 'file';
    	newFile.name	= 'upload[]';
    	newFile.id		= 'upload'+fieldCount;
    
    	//	Create a new link to remove that field.
    	var removeFile	= document.createElement( 'span');
    	removeFile.innerHTML = 'remove';
    	removeFile.name	= 'remove'+fieldCount;
    	removeFile.id	= 'remove'+fieldCount;
    	removeFile.className = 'uploadlink removelink';
    
    	//	Create a container to hold the two new fields.
    	var container = document.createElement( 'div' );
    	container.name	= 'con'+fieldCount;
    	container.id	= 'con'+fieldCount;
    
    	//	Put the newly created fields in the container.
    	container.appendChild(newFile);
    	container.appendChild(removeFile);
    
    	//	Attach the container to the document for all to see!
    	document.getElementById( 'uploads' ).appendChild(container);
    	addEvent(removeFile, 'click', removeField, false);
    	
    	fieldCount++;
    	actualCount++;
    }
    
    function removeField(e)
    {
    	this.parentNode.parentNode.removeChild(this.parentNode);
    	actualCount--;
    
    	//	If we are removing the last upload, change the text back.
    	if (actualCount == 0) {
    		document.getElementById( 'af' ).innerHTML = "Attach a file";
    		var uploadButton = document.getElementById( 'loadFiles' );
    		uploadButton.parentNode.removeChild(uploadButton);
    	}
    }
    
    function addEvent(elm, evType, fn, useCapture)
    {
    	if (elm.addEventListener) {
    		elm.addEventListener(evType, fn, useCapture);
    		return true;
    	} else if (elm.attachEvent) {
    		var r = elm.attachEvent('on' + evType, fn);
    		return r;
    	} else {
    		elm['on' + evType] = fn;
    	}
    }

    Thanks for your help in advance!
    Last edited by veilig; Apr 24, 2007 at 11:35.

  2. #2
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did a little more homework and was able to fix my problem, here's what I did

    I changed my removeField function and added a couple new lines to it

    Code:
    function removeField(e)
    {
    	var targetElement = null;
    
    	if (typeof e.target != "undefined")
    		targetElement = e.target;
    	else
    		targetElement = e.srcElement;
    
    	while (targetElement.nodeType == 3 && targetElement.parentNode != null)
    		targetElement = targetElement.parentNode;
    
    	targetElement.parentNode.parentNode.removeChild(targetElement.parentNode);
    	actualCount--;
    
    	//	If we are removing the last upload, change the text back.
    	if (actualCount == 0) {
    		document.getElementById( 'af' ).innerHTML = "Attach a file";
    		var uploadButton = document.getElementById( 'loadFiles' );
    		uploadButton.parentNode.removeChild(uploadButton);
    	}
    }

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can change the following
    Code:
    	var targetElement = null;
    
    	if (typeof e.target != "undefined")
    		targetElement = e.target;
    	else
    		targetElement = e.srcElement;
    to this
    Code:
    var targetElement = e.target || e.srcElement;
    nice huh


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
  •