2

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.

Community
  • 1
  • 1
nick2k3
  • 1,399
  • 8
  • 18
  • 25

3 Answers3

6

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();
jrummell
  • 42,637
  • 17
  • 112
  • 171
  • Can you clarify this syntax? $("#panel #specific-form-id").remove(); I thought $() could handle only one id.. – nick2k3 Jan 18 '12 at 18:04
  • Although you CAN target as many IDs as you'd like, it's unnecessary since IDs are by definition unique. That would be like specifying a person by saying you were looking for the one with "SIN 99999 son of the man with SIN 99998" – Sinetheta Jan 18 '12 at 18:15
  • so why did you write $("#panel #specific-form-id") ? – nick2k3 Jan 18 '12 at 18:17
  • No particular reason other than to show that `#specific-form-id` is a child of `#panel`. It would make more sense if it was a class: `$("#panel .specific-form-class").remove()`. I'll update the answer to avoid confusion. – jrummell Jan 18 '12 at 18:53
2

I imagine you'd like your "remove buttons" to do the removing?

$('.remover').click(function(){
    $(this).closest('form').remove();
});

would work if you added a "remover" class to the buttons fro easier targetting

<input type="button" id="remove_0" value="-"/>

Removing all of the forms is just a simple select and remove in whatever event handler is appropriate.

$('form').remove();
Sinetheta
  • 9,189
  • 5
  • 31
  • 52
  • would this work?: $('#remove_0').click(function(){ $(this).closest('form').remove(); }); Also, does $('form').remove(); remove all the forms in the page? I cannot do it because there are other forms I must not touch. – nick2k3 Jan 18 '12 at 18:04
  • You'll need to try to describe your needs as specifically as possible. The first code I provided was assuming that you would be including many "remove buttons" and would want them all to behave the same way. It is always a good idea to make your code as generic as possible, handling as many cases as you can with each function/handler. To your first question, yes that would work just fine, but would only activate 1 button. As for your second question, a "remove all button" would simply need a way of targeting all and only all of the forms you want removed. So it depends on the rest of your html – Sinetheta Jan 18 '12 at 18:11
  • My needs are to be able to remove a single row. Then removing one row or many rows one after the other does not matter. I tried doing $("#panel").remove( $("#form_coord_0") ); but it resulted in an error: Error: c.replace is not a function – nick2k3 Jan 18 '12 at 18:19
  • side note, maybe it will clarify what I'm trying to do: I am mapping an array stored in GreaseMonkey variables into a list of forms. Whenever a user adds or edit or delete an entry I need to modify the array, serialize it and store using GM_setValue() (greasemonkey does not handle arrays :((( ). At this point deleting all the forms and reading it would be "safer" than deleting one single row. – nick2k3 Jan 18 '12 at 18:25
  • Unfortunately that sentence may make sense to you, but we can't tell what you're trying to do. .remove() is a method which removes your current selection (optional filtered by a selector), you target something then call remove to get rid of it. $("#form_coord_0").remove() would remove exactly and only that one and all of its contents. – Sinetheta Jan 18 '12 at 18:26
  • What does the array look like? How are you "mapping it"? Are you able to provide a link or set up a jsFiddle, right now we're blind and can't tell how much of this html is under your control. Ideally when you need to perform group action on elements you give them something in common eg: a class – Sinetheta Jan 18 '12 at 18:31
0

First example

$("#panel").remove(line_id)

Second example

$("#panel").html('')