This code adds & removes textboxes from the screen. In the remove function, it also renames any textboxes that come after the one deleted so that the numbering stays in order (i.e. 1,2,3,4 instead of 1,2,4,5,8) and updates the count parameter of the textbox's corresponding remove link so that the textbox's name (i.e. file3) matches its count parameter.
This is the line of code that appears to be causing me a problem: document.getElementById('removeLink' + nextFile).onclick = "removeAdditionalFile(this.parentNode, ' + count + ')";
in the while loop of the removeAdditionalFile function. Basically, the textbox doesn't get deleted like it should when you click on the link. My guess would be because "this.parentNode" isn't pointing to the right thing, but I don't understand why it's not. Anybody know how to fix this?
I had been fooling around for awhile with updating the entire innerHTML instead of just the onclick (in the while loop of the remove function), and it was kind of working but not quite and it was much more complicated, so if I could just get the onclick changed correctly, that'd be great.
function addFileTextbox()
{
//main div that the other divs will be added to
var divLocation = document.getElementById('addToDiv');
//create new div for holding textboxes, & give it a unique name for uploading
var newDiv = document.createElement('div');
var count = document.getElementById('addToDiv').getElementsByTagName('input').length + 2; //+2 because since it hasn't been appended yet, the length will be short one. We need this number to set the unique div name.
var divIDName = 'file' + count;
var removeLinkID = 'removeLink' + count;
newDiv.innerHTML = '<input type="file" name="' + divIDName + '" id="' + divIDName + '" size="57"> <a href="#" id="' + removeLinkID + '" onclick="removeAdditionalFile(this.parentNode, ' + count + ')">Remove</a>'; //THIS WORKS FINE
//Attach new div to main div location
divLocation.appendChild(newDiv);
//Increase the count of files to be uploaded (+1 for the file textbox already there)
var fileCount = document.getElementById('addToDiv').getElementsByTagName('input').length + 1;
document.getElementById('fileCount').value = fileCount;
}
function removeAdditionalFile(divIDNode, count)
{
//get main div that the other divs are attached to
var divLocation = document.getElementById('addToDiv');
//delete the file textbox
divLocation.removeChild(divIDNode);
//Decrease the count of files to be uploaded (+1 for the permanent file textbox)
var fileCount = document.getElementById('addToDiv').getElementsByTagName('input').length + 1;
document.getElementById('fileCount').value = fileCount;
//rename file textboxes that come after the one deleted so that they get uploaded
var nextFile = count + 1;
while (document.getElementById('file' + nextFile)) //there are file textboxes after the one deleted
{
//rename the file textbox to be one less & change the count parameter of the remove link
document.getElementById('file' + nextFile).name = "file" + count;
document.getElementById('removeLink' + nextFile).onclick = "removeAdditionalFile(this.parentNode, ' + count + ')"; //THIS DOESN'T WORK
nextFile++;
count++; //will always be one less than nextFile
}
}