Using jQuery to dynamically add/remove form elements

I've got an HTML form for which I'd like my users to be able to add and remove form elements according to how many of that particular item they'd like to enter.

For example, let's say a user a creating a recipe, and they need to specify the ingredients. I'd like the user to be able to click "Add" to add a new text box for each new ingredient they're adding, with the ability to remove that ingredient if they change their mind.

Now here's the catch: I'd like the indices of the array of inputs to automatically re-number themselves when one is removed so that I can send a nice and tidy array to a CakePHP controller for processing.

I've fooled around with a few examples but haven't been able to get it to work the way I want. Javascript has never been my strong point so tips/suggestions are greatly appreciated!

Then don't touch the indices, leave them blank. The server will interpret multiple ingredient[]s as a zero-N array.



For dynamic addition/removal, it's easy enough to use the native DOM traversal keywords, rather than jQueries "$(this).parent().get(0)"

*buys joe a drink*

Why thankyou sir.