Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    mjs
    mjs is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    97
    Thanks
    17
    Thanked 0 Times in 0 Posts

    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

    Code:
    <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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mjs View Post
    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

    Code:
    <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.

  • #4
    mjs
    mjs is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    97
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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
    Last edited by mjs; 11-22-2010 at 04:28 AM.

  • #5
    mjs
    mjs is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    97
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by interfacetricks View Post
    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:
    Code:
    <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.
    Code:
    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
    Code:
    <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

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •