HTML Javascript dynamically add and remove textboxes

Question

I'm trying to add and remove text boxes dynamically using javascript and HTML. I can get it to add and remove but sometimes the remove button doesn't work. when I inspect the element it says that there is no onclick value for the remove button. I don't understand why when I set the onclick in the add function.

Heres my code:

<div  id="reqs">
<h3 align = "center"> Requirements </h3>
<script>
    var reqs_id = 0;
    function removeElement(elementId,elementId2) {
        // Removes an element from the document
        var element2 = document.getElementById(elementId2);
        var element = document.getElementById(elementId);
        element2.parentNode.removeChild(element2);
        element.parentNode.removeChild(element);

    }   
    function add() {
        reqs_id++;// increment reqs_id to get a unique ID for the new element

        //create textbox
        var input = document.createElement('input');
        input.type = "text";
        input.setAttribute("class","w3-input w3-border");
        input.setAttribute('id','reqs'+reqs_id);
        var reqs = document.getElementById("reqs");
        //create remove button
        var remove = document.createElement('button');
        remove.setAttribute('id','reqsr'+reqs_id);
        remove.onclick = function() {removeElement('reqs'+reqs_id,'reqsr'+reqs_id);return false;};
        remove.setAttribute("type","button");
        remove.innerHTML = "Remove";
        //append elements
        reqs.appendChild(input);
        reqs.appendChild(remove);
    }

</script>
<button type="button" value="Add" onclick="javascript:add();"> Add</button>

Lets say you have 7 inputs. At the moment of calling removeElement, your reqs_id parameter is equal 7, and it is called with parameters removeElement('reqs7', 'reqs_id7'). So you are able to remove the only the last one. If you would add reqs_id-- to removeElement function, your code will work. But it beats the point of your form. Give me a sec, I'll try to give you a proper solution — Ludovit Mydla
– Ludovit Mydla, Commented Apr 8, 2018 at 1:48
I am not in an area to test code at the moment, but it looks like you are removing the 'remove' button which holds the onclick function before the input field, perhaps that is where the bug that you bring up is? Seems like a small thing so I'm not sure it's an issue, but web design is finicky sometimes with JS — ViaTech
– ViaTech, Commented Apr 8, 2018 at 1:50

Ludovit Mydla · Accepted Answer · 2023-04-02 10:59:55Z

5

This will work:

var reqs_id = 0;

function removeElement(ev) {
  var button = ev.target;
  var field = button.previousSibling;
  var div = button.parentElement;
  div.removeChild(button);
  div.removeChild(field);
}

function add() {
  reqs_id++; // increment reqs_id to get a unique ID for the new element

  //create textbox
  var input = document.createElement('input');
  input.type = "text";
  input.setAttribute("class", "w3-input w3-border");
  input.setAttribute('id', 'reqs' + reqs_id);
  input.setAttribute('value', reqs_id);
  var reqs = document.getElementById("reqs");
  //create remove button
  var remove = document.createElement('button');
  remove.setAttribute('id', 'reqsr' + reqs_id);
  remove.onclick = function(e) {
    removeElement(e)
  };
  remove.setAttribute("type", "button");
  remove.innerHTML = "Remove" + reqs_id;
  //append elements
  reqs.appendChild(input);
  reqs.appendChild(remove);
}

<div id="reqs">
  <h3 align="center"> Requirements </h3>
</div>
<button type="button" value="Add" onclick="javascript:add();"> Add</button>

edited Apr 2, 2023 at 10:59

user18597175

answered Apr 8, 2018 at 2:00

Ludovit Mydla

8229 silver badges17 bronze badges

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

2 Comments

Matthew Decarlo Over a year ago

Thank you this worked. Could you maybe help me understand what i was doing wrong. ive never seen let statements in javascript before.

Ludovit Mydla Over a year ago

@MatthewDecarlo For now, lets say that let is the same as var :-) If you want to know more, search for var vs. let on google or here on SO. It wasn't let, that made it work. It was your parameters of removeElement, that were not doing what you wanted. The solution uses event object (the ev parameter) which holds info about the exact element, that called the function ev.target. From there it's quite understandable what happens, right? :-)

Corey · Accepted Answer · 2018-04-08 04:02:13Z

3

Fixed from my previous answer. Another option that may be necessary is to have each element know its exact place and be able to adjust itself based on what was added or removed. This enhancement will account for that by re-adjusting and ensuring your elements are always in order. (if desired)

See JSFiddle example.

Html

<div id="reqs">
   <h3>Requirements</h3>
   <button type="button" value="Add" onclick="javascript:add();">Add</button>
   <br>
</div>

Javascript

function removeElement(e) {
    let button = e.target;
    let field = button.previousSibling;
    let div = button.parentElement;
    let br = button.nextSibling;
    div.removeChild(button);
    div.removeChild(field);
    div.removeChild(br);

    let allElements = document.getElementById("reqs");
    let inputs = allElements.getElementsByTagName("input");
    for(i=0;i<inputs.length;i++){
        inputs[i].setAttribute('id', 'reqs' + (i+1));
        inputs[i].setAttribute('value', (i+1));
        inputs[i].nextSibling.setAttribute('id', 'reqsr' + (i+1));
    }
}

function add() {
    let allElements = document.getElementById("reqs");
    let reqs_id = allElements.getElementsByTagName("input").length;
    reqs_id++;

    //create textbox
    let input = document.createElement('input');
    input.type = "text";
    input.setAttribute("class", "w3-input w3-border");
    input.setAttribute('id', 'reqs' + reqs_id);
    input.setAttribute('value', reqs_id);
    let reqs = document.getElementById("reqs");

    //create remove button
    let remove = document.createElement('button');
    remove.setAttribute('id', 'reqsr' + reqs_id);
    remove.onclick = function(e) {
        removeElement(e);
    };
    remove.setAttribute("type", "button");
    remove.innerHTML = "Remove";

    //append elements
    reqs.appendChild(input);
    reqs.appendChild(remove);
    let br = document.createElement("br");
    reqs.appendChild(br);
}

edited Apr 8, 2018 at 4:02

answered Apr 8, 2018 at 1:57

Corey

2001 gold badge2 silver badges15 bronze badges

5 Comments

ViaTech Over a year ago

Have you tested the variable issue you bring up? Var should be a global declaration in Javascript. "let" wouldn't be, but "var" should.

Ludovit Mydla Over a year ago

reqs_id live in a global scope, so add function will work. Your example is flawed, because it will reset the counter reqs_id when adding new fields

Matthew Decarlo Over a year ago

THANK YOU! that worked for me. the only problem now is that all of their ids are the same. i was trying to get unique ids

Corey Over a year ago

True. Yea that is flawed, also wouldn't fix it either way, you are right. Each element needs to be given a unique id, and then the remove button needs to first check the element group id that it is removing, and remove that specific group. So a bit more logic is required. Sorry. - I will try to provide a better example.

Corey Over a year ago

Fixed from my original answer that I was too quick to guess. New solution is good with fiddle example.

Collectives™ on Stack Overflow

HTML Javascript dynamically add and remove textboxes

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related