add and remove boxes using javascript

Question

I have two text boxes and two buttons named add and remove. The requirement is to add more boxes along with the current boxes. i somehow managed to add boxes but the requirement of removing the boxes is not working. Please help to why this code is not working and if possible suggest a working solution.

function addFunction(){
  var element = document.createElement("input");
  var parent = document.getElementById("form1");
  parent.appendChild(element);
}

function removeFunction(){
  var child = document.getElementsByTagName("input");
  var parent = document.getElementById("form1");

  for (var i = 0; i > child.length; i++) {
    parent.removeChild(child[i]);
  };
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form id="form1" style="margin-left: 40%; margin-top: 100px;">
      <input type="text" id="one"><br><br><br>
      <input type="text" id="two"><br>
      <p id ="demo"> </p>
    </form>
    <button style="margin-left: 40%;" type="button" value="ADD" id="addButton" onclick="addFunction()">ADD</button>
    <button style="margin-left:50px;" type="button" value="REMOVE" id="removeButton" onclick="removeFunction()">REMOVE</button>
  </body>
</html>

you need to clone the node before appending the same developer.mozilla.org/en/docs/Web/API/Node/cloneNode — gurvinder372
– gurvinder372, Commented Apr 20, 2017 at 7:58

Brissy · Accepted Answer · 2017-04-20 08:01:49Z

1

for (var i = 0; i <  child.length; i++) {
        parent.removeChild(child[i]);
    };

You have got wrong condition in your for loop. Your i is always 0 at start, and is lesser then length of array with node elements, so loop just can't start. P.s. and you don't need var i before it

answered Apr 20, 2017 at 8:01

Brissy

3691 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kaljak · Accepted Answer · 2017-04-20 08:02:02Z

1

Your for-Loop is wrong:

        for (var i = 0; i > child.length; i++) {
            parent.removeChild(child[i]);
        };

You need to change ">" to "<"

answered Apr 20, 2017 at 8:02

kaljak

1,2731 gold badge17 silver badges34 bronze badges

Comments

Felix Haeberle · Accepted Answer · 2017-04-20 08:04:47Z

1

Replace your > condition in the for loop with <. You want the for loop to be executed until it reach child.length.

answered Apr 20, 2017 at 8:04

Felix Haeberle

1,61414 silver badges21 bronze badges

1 Comment

Daredevil Over a year ago

yeah i did it but its saying that my up votes are recorded but it wont be shown publicly since i have less than 15 reputations..

Collectives™ on Stack Overflow

add and remove boxes using javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related