Question

I have a bunch of input boxes and a button at the last input box to add more input boxes which. I have a problem removing the button when the add button is clicked.

http://gist.github.com/621417

I am getting this error on trying to removing a child element.

Error: uncaught exception: [Exception… “Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.removeChild]” nsresult: “0x80004003 (NS_ERROR_INVALID_POINTER)” location: “JS frame

Answer 1

When you are first creating the addBtn element, you are only setting the name property.

You need to set the id property as well.

So, in createCreditBalanceInputs, change the code to include this line (addBtn.id = "addBtn";):

var addBtn = document.createElement('input');
addBtn.type = 'button';
addBtn.style.marginLeft = "20px";
addBtn.style.marginTop = "5px";
addBtn.name="addBtn";
addBtn.id = "addBtn";
addBtn.value="Add";

Then, you don’t need to create the button every time. You can just keep appending it and the DOM hooks will automatically remove it from its previous position. You can change addCreditBalance to look more like this:

var addButton = document.getElementById('addBtn');
/*
//Add button
var addBtn = document.createElement('input');
addBtn.type = 'button';
addBtn.style.marginLeft = "20px";
addBtn.style.marginTop = "5px";
addBtn.name="addBtn";
addBtn.value="Add";
addBtn.addEventListener ('click',addCreditBalance,false);
*/
container.appendChild(addButton);

and remove the earlier line where you invoked the removeChild call.