How to add new functions to remove field?

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>

Code (markup):

but i need some helps to add new functions for removing field, For any suggest and pointer would be appreciate.

 

I would use jquery to remove the field from the DOM. Javascript gets too complicated when you are doing a lot of DOM manipulation.

Example:
$('#elementID').remove(); //REMOVES AN ELEMENT WITH MATCHING ID
or
$('.elementClass:last').remove(); //REMOVES THE LAST ELEMENT OF THE STATED CLASS

Hope this helps!

W.

 

how does that help? he's not using jquery... that's the problem with jquery users, they don't learn javascript and start to think of it as 'complicated'. @s.jns do you want to be removing from the bottom up or to be removing a particular user-selected input (perhaps via a remove link next to it)

 

Hi pagewil,

hm... how to use that code? mean should I create a functions remove()? , I try create new function to remove field eg

function remove() {
    var fieldsArea = document.getElementById('new_field'),
      lastChild = fieldsArea.lastChild;
    if(lastChild) {
      fieldsArea.removeChild(lastChild);
     fields -= 1;
    }
}

Code (markup):

but it seem not work, any idea?
Many thanks for your attention

@ dimitar christoff
If possible that would be better if removing from particular user selected but if I get the way to remove from the last field I also appreciate it.
Perhaps the id of function addInput() needed as unique id, then i try Replace:

newElement.id = 'new_field';

Code (markup):

with:

newElement.id = 'new_field'+(fields+1);

Code (markup):

still need suggestion for this case, Thanks in Advance

 

here's an example, largely based upon your code/idea:

var inputs = {
    fields: 0,
    target: "new_field",
    addInput: function() {
        if (this.fields != 10) {
            this.fields++;

            var newElement = document.createElement('div');
            newElement.id = this.target + this.fields;
            newElement.innerHTML = "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /> <a href='#' onclick='inputs.removeInput(" + this.fields + ");return false'>del</a><br />";

            document.getElementById(this.target).appendChild(newElement);
        } else {
            alert("Only 10 fields allowed.");
            // document.form.add.disabled = true;
        }
    },
    removeInput: function(index) {
        index = index || this.fields; // either a particular one or last one
        var fieldToRemove = document.getElementById(this.target + index);
        if (!fieldToRemove) return;

        fieldToRemove.innerHTML = ''; // empty it to avoid memory leaks.
        fieldToRemove.parentNode.removeChild(fieldToRemove);
        this.fields--;
    }
};

// attach events
window.onload = function() {
    document.getElementById("add").onclick = function() {
        inputs.addInput();
        return false;
    };

    document.getElementById("remove").onclick = function() {
        inputs.removeInput();
        return false;
    };
};

Code (javascript):

see it working: http://www.jsfiddle.net/dimitar/G7ZUJ/

it supports either removal by index or last one - although reindexing is needed (if you add say, 6 fields and remove #3 then add another one, you end up with x2 #5) - but you can resolve that yourself i am sure. one way would be to keep a state for up-to nn inputs in an array with a state 'true/false' -> inputsIndex = [true,true,false,true,true,false,false,false,false] and then before adding, do a lookup and pull the index of the first false (free slot) and use that instead of the `fields' var.

 

OMG, OMG, unbelievable....

You Save my live, I want alive for more longer time...

So many thanks for your awesome script, GBU

 

Anyway when i Tested it with IE8 I don't see any new field, but a message appear when i click up to 11 said: "Only 10 fields allowed" this seem the field hiding, what i can do to fix this?

 

this works for me in ie8 though, odd. post your complete code...

 

Problem solved, I have another table that contain same id as look

<table width="100%" cellpadding="10" cellspacing="0" id="new_field">
bla..bla..
</table>

Code (markup):

when i removed then all work fine, I appreciate your attn and for the time You already given, Thank You.