Javascript remove problem?

Question

Hey Everyone,

what i am trying to do is everytime a file is uploaded i want a remove button to appear next to it. This works fine.

However, the problem i am having is every time i hover over the remove button you get the following names for example if i have 3 files the first file with a remove will say javascript:removeFileInput(f1), the second javascript:removeFileInput(f2),and 3rd javascript:removeFileInput(f3).

The problem with this is if i remove the second file the first one will still say f1, but the problem is with the 3rd one. The third one should change to f2 (since removing the second one makes the 3rd become the second one) but instead it still remains f3 and i am wondering how could i make it change to f2 ? the reason i need to be able to do this is because if i try to insert it into my database it gives me an error an asks for f2.

Here is the code i have

javascript

<script type="text/javascript">

var upload_number = 1;

function addFileInput()

{

var d = document.createElement("div");

var l = document.createElement("a");

var file = document.createElement("input");

var text = document.createElement("input");

d.setAttribute("id", "f"+upload_number);

file.setAttribute("type", "file");

file.setAttribute("name", "attachment"+upload_number);

text.setAttribute("type", "text");

text.setAttribute("name", "description"+upload_number);

l.setAttribute("href", "javascript:removeFileInput('f"+upload_n...

l.appendChild(document.createTextNode("R...

d.setAttribute("id", "f"+upload_number);

d.appendChild(file);

d.appendChild(text);

d.appendChild(l);

document.getElementById("moreUploads").

appendChild(d);

document.getElementById("totalAttachment... = upload_number;

upload_number++;

}

function removeFileInput(i)

{

var elm = document.getElementById(i);

document.getElementById("moreUploads").

removeChild(elm);

upload_number = upload_number - 1

}

</script>

form

<input type="file" name="attachment1" id="attachments"

value="" onchange="document.getElementById('moreU...

style.display = 'block';" />

Description <input type="text" name="description1

" id="description" value="" />

<div id="moreUploads"></div>

<div id="moreUploadsLink" style="display:none;">

<input type="button" value="Attach another file"

onclick="javascript:addFileInput();" >

</div>

<input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

Thank you in advance,

Rach

Answer 1

Since I can&#039;t see all of your code, I can&#039;t be sure, but the following may give you some ideas about how to approach the problem. The notion would be to call renumber() after calling (or at the end of) removeFileInput().

function renumber() {

// convenience reference to doc object

var d = document;

// collection of all divs in page

var divs = d.getElementsByTagName( &#039;DIV&#039; );

var last = divs.length;

// counter for renumeration

var count = 1;

for (var i = 0; i &lt; last; i++) {

// reference to current div to examine

var div = divs[i];

// if the id starts &#039;f&#039;, look deeper

if (&#039;f&#039; == div.id.charAt( 0 ) ) {

// chop the leading &#039;f&#039; - remainder COULD be the

// previous value of the upload number

var upNum =  div.id.substring( 1 );

// if the div has a child with a name like &#039;description&#039;

// with a suffix like its own, treat this as a &#039;hit&#039;

if (hasChildNamed( div, &#039;description&#039;, upNum ); {

// new, renumbered div id

var dId = &#039;f&#039; + count;

// new, renumbered text name

var tName = &#039;description&#039; + count;

// new, renumbered file name

var fName = &#039;attachment&#039; + count;

// get references to the text and file elements

var text = getChildByName( div, &#039;description&#039;, upNum );

var file = getChildByName( div, &#039;attachment&#039;, upNum );

// change the id and name attributes

text.setAttribute( &#039;name&#039;, tname );

file.setAttribute( &#039;name&#039;, fname );

div.setAttribute( &#039;id&#039;, dId );

count++; // iterate the count

}

}

}

}

function getChildByName( parent, name ) {

// collection of all children of parent

var children = parent.childNodes;

var last = childNodes.length;

for (var i = 0; i &lt; last; i++) {

var child = childNodes[i];

// if any child has the right name, return a

// reference to it, exiting immediately

if ( name == child.name) {

return child;

}

}

// none found above - return null

return null;

}

function hasChildNamed( parent, name ) {

return null != getChildByName( parent, name );

}