I really don’t have any “how to” advice to give, but I would like to mention a couple of things:
First, I find the onclick
attribute to be outdated and obtrusive. It really does not need to be in the HTML. There shouldn’t be any JS in the HTML, in my view. That is why event listeners were invented. Give the elements an id or class as applies and register the listeners in the JS.
Second, is it really necessary to have a prepared table with empty elements? Why not template it and only draw the rows that display registered members. If there is to be a limit on the size of the roster, then when that limit is reached, disable the Add Member button, or hide it.
Whatever you do, let it be delegation and not individual bindings to the event listeners. For instance, rather than individual bindings on each of the four '<button>
s, bind to the parent object. A click detected anywhere in its domain will trigger the handler. At that point the delegation begins… Which element was clicked? Given that we know which handler to flow through.
The beauty of delegation is that for one it has way less bindings, meaning less memory is used to manage them, and there is no restriction on the size of the domain. We can dynamically add and remove buttons without paying any mind to event handling. It’s all taken care of.
Take for instance the Add Member button. It may be removed and reinserted without any care for what event handler it may trigger. It triggers the parent, who knows best what purpose the button serves, which picks up on the event.