How can I add and remove form fields using jQuery?

In my application I'm working on the joined table (table between m:n association). There I've a form to insert data in this table. My question now is how I can add and remove dynamically with jQuery form fields as you can see here http://railscasts.com/episodes/196-nested-model-form-part-1.

Can you give me some examples, tutor开发者_如何学Cials etc.?

Thank you very much!

---

jQuery has functionality that allows you to add/remove elements from the page, for example the following would remove all <p> tags on the page:

$("p").remove();

and this will add <p> to any <div> tag

$("div").add("p");

EDIT: The newly created paragraph won't appear on the page though. To place it on the page you would need to add an insertion method.

The two links below should explain them further with some good examples, I hope this helps!

http://api.jquery.com/add/

http://api.jquery.com/remove/

EDIT: As pointed out you may also want to look at Append

$("p").append("Hello");

---

There is something show/hide in jquery, which shows/hides the elements, and then you have remove() method in jquery which will remove your elements from the DOM. I have written a simple demo at jsfiddle to illustrate the remove method.

http://jsfiddle.net/refhat/rgYMJ/4/

This is elementary but I Hope this helps.

---

Try using the JQuery append and remove functions as shown in this example:

http://jsfiddle.net/R6kuh/

Hope this helps.