PDA

View Full Version : How to add new functions to remove field?



mjs
Nov 21st, 2010, 07:41 PM
Hi Guys,

Someone please help me how to add new function to remove the field, i have js script function that add new field as follows


<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
var htmlText = "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
var newElement = document.createElement('div');
newElement.id = 'new_field';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('new_field');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 10 fields allowed.");
document.form.add.disabled=true;
}
}
</script>
but i need some helps to add new functions for removing field, For any suggest and pointer would be appreciate.

Old Pedant
Nov 21st, 2010, 10:53 PM
That code is already broken.

You create all the new elements with the *SAME* id! ILLEGAL! id's should be unique.

Anyway, you don't tell us how the user is supposed to indicate *which* field to remove.

interfacetricks
Nov 22nd, 2010, 01:21 AM
Hi Guys,

Someone please help me how to add new function to remove the field, i have js script function that add new field as follows


<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
var htmlText = "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
var newElement = document.createElement('div');
newElement.id = 'new_field';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('new_field');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 10 fields allowed.");
document.form.add.disabled=true;
}
}
</script>
but i need some helps to add new functions for removing field, For any suggest and pointer would be appreciate.

To remove a field you first get a reference to it, such as by having the user click on it or using document.getElementById (in which case you need to make sure each element has a unique id).

Then you can remove it using input_reference.parentNode.removeChild(input_reference);

When deleting interface elements, if they have any events (onclick etc) assigned to them, it can be important to delete all the events first, because of a memory leak in internet explorer.

I have made a simple example that demonstrates the adding and removing of input fields like in your question. It also shows how to remove their events. You can try it out here.

http://webinterfacetricks.com/removing_fields/

The source has more explanation in it. Let me know if you have any questions.

mjs
Nov 22nd, 2010, 04:22 AM
That code is already broken.

You create all the new elements with the *SAME* id! ILLEGAL! id's should be unique.

Anyway, you don't tell us how the user is supposed to indicate *which* field to remove.

Hi Old Pedant,

I appreciate your corrections, then i try to put unique id:
replace:
newElement.id = 'new_field';
with:
newElement.id = 'new_field'+(fields+1);
this also work with most browsers except IE, actually I don't know that I was correct, need more pointers,

the field to remove it could be from the last one, or it also if possible according on user want.
many thanks

mjs
Nov 22nd, 2010, 04:35 AM
The source has more explanation in it. Let me know if you have any questions.
I opened Your link, that look work for most browsers, that one my comment about the removing fields process.

there already remove button:

<button onclick="delete_field()" id="removal_button">Remove Field</button>
then after user click remove button that not directly to remove field but user need more click which field need to remove.

I have another idea e.g.

function addRow() {
if (document.all("tblGrid").rows.length == 5) {
return; // already max 5 rows
}
var newRow = document.all("tblGrid").insertRow();
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'><input type='button' value='Delete' onclick='removeRow(this);'/>";
}
</script>
so the button remove

<input type='button' value='Delete' onclick='removeRow(this);'/>
placed just after new fields, this mean user just need one click to remove field

Thank You

Old Pedant
Nov 22nd, 2010, 05:13 AM
So long as you understand that this in that removeRow(this) will refer to the <input>. You will need to move up the "tree" of nodes to find the <tr> parent, and then remove that. And then, yes it would work fine.