Cannot remove a dynamically added text field.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • plumba
    New Member
    • Aug 2007
    • 57
    #1

    Cannot remove a dynamically added text field.

    Hi all

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

    Code:
    <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>Frien ds List</strong><br />
    <ol id="friends_are a">
    <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="addFie ld('friends_are a','friend_',15 );" />
    </form>

    </body>
    </html>[/HTML]

    Any suggestions how to remove a field????

    Regards
    Tags: None
    • Logician
      New Member
      • Feb 2007
      • 210
      #2
      I wonder if you have you tested this code with I.E., which has a problem creating input fields in the conventional way? If adding to existing fileds, it would be better to use .cloneNode.
      The innerHTML branch is pointless since it doesn't represent an 'older method' and if document.create Element isn't supported, neither will innerHTML .

      Originally posted by plumba
      Code:
        input.type = "text"; text,file,checkbox etc.
      That must cause an error.

      If you append a property to field_area, holding either a reference to the last field created or its ID, it would be easy for a removal function to identify it.

        Comment

        • hsriat
          Recognized Expert Top Contributor
          • Jan 2008
          • 1653
          #3
          Try this...[code=javascript]function removeField(lis tId) {
          var toBeRemoved = document.getEle mentById(listId ).lastChild;
          toBeRemoved.par entNode.removeC hild(toBeRemove d);
          }[/code][html]<input type="button" value="Remove Friend Field" onclick="remove Field('friends_ area');" />[/html]

            Comment

            • plumba
              New Member
              • Aug 2007
              • 57
              #4
              Originally posted by Logician
              I wonder if you have you tested this code with I.E., which has a problem creating input fields in the conventional way? If adding to existing fileds, it would be better to use .cloneNode.
              The innerHTML branch is pointless since it doesn't represent an 'older method' and if document.create Element isn't supported, neither will innerHTML .

              That must cause an error.

              If you append a property to field_area, holding either a reference to the last field created or its ID, it would be easy for a removal function to identify it.
              You are correct.. l removed the // just before the word text - only in my post though.

                Comment

                • plumba
                  New Member
                  • Aug 2007
                  • 57
                  #5
                  Originally posted by hsriat
                  Try this...[code=javascript]function removeField(lis tId) {
                  var toBeRemoved = document.getEle mentById(listId ).lastChild;
                  toBeRemoved.par entNode.removeC hild(toBeRemove d);
                  }[/code][html]<input type="button" value="Remove Friend Field" onclick="remove Field('friends_ area');" />[/html]

                  Brilliant!! This works a treat!!! Is was throwing up an 'object required' error for a bit - until I figured out the typo [HTML]onclick="remove Field('friends_ area');" />[/HTML] it did not require the 's' in friends_area.

                  One small problem though, this will actually allow the user to remove all fields, I would like it to leave at least one field on there - otherwise after deleting all fields it will not allow you to add a field again.

                  Thanks for your help!!

                    Comment

                    • hsriat
                      Recognized Expert Top Contributor
                      • Jan 2008
                      • 1653
                      #6
                      [code=javascript]function removeField(lis tId) {
                      var toBeRemoved = document.getEle mentById(listId ).lastChild;
                      if (!toBeRemoved.p reviousSibling) return;
                      toBeRemoved.par entNode.removeC hild(toBeRemove d);
                      }[/code]

                      Originally posted by plumba
                      it did not require the 's' in friends_area.
                      Could not understand the reason...

                        Comment

                        • plumba
                          New Member
                          • Aug 2007
                          • 57
                          #7
                          Originally posted by hsriat
                          [code=javascript]function removeField(lis tId) {
                          var toBeRemoved = document.getEle mentById(listId ).lastChild;
                          if (!toBeRemoved.p reviousSibling) return;
                          toBeRemoved.par entNode.removeC hild(toBeRemove d);
                          }[/code]


                          Could not understand the reason...
                          That works a treat. Many thanks for your speedy and reliable help hsriat.

                          Kind regrds

                            Comment

                            • hsriat
                              Recognized Expert Top Contributor
                              • Jan 2008
                              • 1653
                              #8
                              Originally posted by plumba
                              That works a treat. Many thanks for your speedy and reliable help hsriat.

                              Kind regrds
                              You are welcome


                              Regards,
                              Harpreet

                                Comment

                                • plumba
                                  New Member
                                  • Aug 2007
                                  • 57
                                  #9
                                  Originally posted by hsriat
                                  You are welcome


                                  Regards,
                                  Harpreet

                                  Ok, it's me again....

                                  I just want to enhance this slightly, and I think this may be quite simple.

                                  I want to add some span tags to the end of each line, as below:

                                  [HTML]<ol id="friend_area ">
                                  <li><input type="text" name="friend_1" id="friend_1" /></li><span id ="1"></span>
                                  <li><input type="text" name="friend_2" id="friend_2" /></li><span id ="2"></span>
                                  <li><input type="text" name="friend_3" id="friend_3" /></li><span id ="3"></span>
                                  <li><input type="text" name="friend_4" id="friend_4" /></li><span id ="4"></span>
                                  <li><input type="text" name="friend_5" id="friend_5" /></li><span id ="5"></span>
                                  </ol>[/HTML]

                                  Is it easy enough to get the function which adds a line to add a span tag to each new line - I'm guessing the number is already generated in the code so it's just a case of adding the span and number into the
                                  Code:
                                  field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
                                  line??

                                    Comment

                                    • hsriat
                                      Recognized Expert Top Contributor
                                      • Jan 2008
                                      • 1653
                                      #10
                                      Don't keep the span tag outside li. Keep it within the li instead.
                                      [CODE=javascript]field_area.inne rHTML += '<li><input name="'+(field+ count)+'" id="'+(field+co unt)+'" type="text" /><span id="'+count+'"> </span></li>';[/CODE]

                                        Comment

                                        Previous template Next
                                        Working...