Dynamic HTML using Javascript

Question

I am using javascript to dynamically build a grid of input elements in HTML. Each row has 4 input elements and the user can add or delete rows as they need. Each time they add or delete a row, I am rebuilding the grid dynamically.

My problem is after I build the grid a second time, I cannot reference any of the elements. I believe the DOM now has 2 occurances of each element with the same name, and is confused when I try to reference by name.

My question: is there any way to reset the DOM listing of element names, so on each dynamic build the "resued" name is still unique ?

Answer 1

You can give the node ids a different unique prefix every time you create the grid and include that each time you reference a node by id.

Or you can change your code not to rebuild the whole grid every time.

However I think it might be that you've misdiagnosed the problem or I don't understand your question correctly. If you remember to remove the old table element from the document before inserting the new one, there should be no conflict over the ids or names.