57
I have a pretty cool script which, on the click of a button, sticks in a extra text box and gives it a unique name/id so it can be munipulated and sent through on a form.
Problem is, I dont know how to remove a text box when added, simplistic terms - a script to reverse what the add button does.
Here's a simple break down of the code...
Expand|Select|Wrap|Line Numbers
- <script type="text/javascript">
- <!--
- function addField(area,field,limit) {
- var field_area = document.getElementById(area);
- var all_inputs = field_area.getElementsByTagName("input");
- var last_item = all_inputs.length - 1;
- var last = all_inputs[last_item].id;
- var count = Number(last.split("_")[1]) + 1;
- if(count > limit && limit > 0) return;
- if(document.createElement) {
- var li = document.createElement("li");
- var input = document.createElement("input");
- input.id = field+count;
- input.name = field+count;
- input.type = "text"; text,file,checkbox etc.
- li.appendChild(input);
- field_area.appendChild(li);
- } else { //Older Method
- field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
- }
- }
- //-->
- </script>
[HTML]</head>
<body>
<form name="frm" method="POST">
<strong>Friends List</strong><br />
<ol id="friends_area">
<li><input type="text" name="friend_1" id="friend_1" /></li>
<li><input type="text" name="friend_2" id="friend_2" /></li>
<li><input type="text" name="friend_3" id="friend_3" /></li>
<li><input type="text" name="friend_4" id="friend_4" /></li>
<li><input type="text" name="friend_5" id="friend_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('friends_area','friend_',15);" />
</form>
</body>
</html>[/HTML]
Any suggestions how to remove a field????
Regards
