Question

I’ve asked about this very example in another question:
Fill in a form with jQuery
but I preferred to create a new one to ask some other details.
I have a div (panel) which currently contains only one form.
This form should represent a list of coordinates. It has some buttons ‘+’ ‘-‘ to add or remove a couple of coordinates (and thus the form).
Each form is generated automatically by a function and has its own id.

<div id="panel" style="position: absolute; left: 190px; top: 300px; width: 400px; height: 300px; border: medium groove brown; background: none repeat scroll 0% 0% black; z-index: 100; color: white;">  
<form id="form_coord_0">  
X <input type="text" style="height: 25px; font-size: 10px;" size="2" name="X" id="coordX_0"/>  
Y <input type="text" style="height: 25px; font-size: 10px;" size="2" name="Y" id="coordY_0"/>  
<input type="button" id="edit_0" value="M"/>  
<input type="button" id="remove_0" value="-"/>  
<input type="button" id="add_0" value="+"/>  
<input type="button" id="go_0" value="go!"/>  
<br/>  
</div>  

I am looking for a way to:
– remove a line and the associated form
– remove all lines and then all the forms

I have this function:

function add_form(id_coord){  
    var new_form="<form id= '"+ id + "'> </form>";
    $("#panel").append(new_form);
}

which adds one form.
And a for loops that add different lines.
Once a line have to be deleted I’d prefer to edit the underlying data structure and empty the div. Then it could be repopulated by another for loop.
The question is the following: how do I delete one form or every form of the div?
I thought about setting div.innerHTML to “” but I really don’t like that solution.

Answer 1

remove a line and the associated form

This will remove a specific form. You can alter the selector if this isn’t what you meant. You can select any element(s) and remove them with .remove().

$("#specific-form-id").remove();

remove all lines and then all the forms

You can remove all children of an element with .empty().

$("#panel").empty();