HTML Javascript Dynamically Add And Remove Textboxes

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 eleme

Solution 1:

This will work:

<div id="reqs">
  <h3 align="center"> Requirements </h3>
</div>
<script>
  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);
  }

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

Solution 2:

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);
}