question about how to apply an onclick event inside javascript

[mwolfe]

I am making a form where the user can upload more than one file at once, using javascript i dynamically add form elements. This works fine, however i want the ability to remove an input if it won't be used (kind of like how gmail does it).

So what i did was i made it so that each input (label + input + remove link)
would be inside a div that was uniquely identified using a global variable that holds the count for the total items + a prefix. Now to remove the node, i could just remove that whole div getting the id and then calling removeNode(true). However i can't figure out how to put an onclick event on the link within the javascript.. how do you do that?

here is my code that creates the remove link (however it doesnt work)

/* This method appends a remove link to obj. the divid contains the id
 * of the node that clicking the link that this method creates, will remove.
 */
function appendRemove(obj, divid) {
		newelm = document.createElement("a");
		newelm.href="javascript:void(0)";
		newelm.onclick = "removeInput(" + divid + ")";
		newelm.innerText = "Remove";
		rem = document.createTextNode("Remove");
		newelm.appendChild(rem);		
		obj.appendChild(newelm);		
	}

the remove link shows up correctly but
the removeInput method does not get called when i click on the link.
no idea how to add that attribute correctly..
any ideas?

[jimfraser]

The usual way to do that is:

thing.onclick = someFunction;
...
function someFunction() {
//do stuff
}

or

thing.onclick = function() {
  someFunction(params);
};

However neither of those will work in your case, because the variable you are passing will keep changing, and clicking the link causes the variable to be read at the time the link is clicked and not when you create the div. So what you need is:

thing.onclick = new Function("removeDiv(" + divId + ");return false;");

OK having said that, lets assume that the a tag is a direct child of the div you're adding. We can skip the IDs altogether, by passing a reference to the A tag to the remove function, and getting the parentnode.

thing.onclick = function() {
	removeInput(this);
	return false;
}
...
function removeInput(clickedAnchor) {
	var divToRemove = clickedAnchor.parentNode;
	divToRemove.parentNode.removeChild(divToRemove);
}

Hope that helps a bit.

PS the return false from the onclick function is so the href doesn't get processed, in your case it's void() so it doesnt matter.

[mwolfe]

hey jim thanks so much, that worked perfectly, great explanation as well.