title: Small Javascript Issue with removing multiple elements from dynamic form
body: <p>Can anyone shed any light on to what I'm doing wrong here if possible?</p>
  
  <p>We have a basic form on a php page with javascript that creates 4 form fields when a button is clicked.</p>
  
  <p>If the button is clicked multiple times then it will keep creating rows of 4 columns. The problem is trying to remove the row (4 elements) if someone clicks the button, I can only ever get it to delete one element where I need it to remove all 4 elements (inputs) in that row,</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var i = 0; /* Set Global Variable i */
  function increment() {
      i += 1; /* Function for automatic increment of field's "Name" attribute. */
  }
  
  //Function to Remove Form Elements Dynamically
  function removeElement(parentDiv, childDiv) {
      if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
      } else if (document.getElementById(childDiv)) {
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
      } else {
          alert("Child div has already been removed or does not exist.");
          return false;
      }
  }
  
  //Functions that will be called upon, when user click on the Name text field.
  function nameFunction() {
      var r = document.createElement('span');
      var y = document.createElement("INPUT");
      y.setAttribute("type", "text");
      y.setAttribute("placeholder", "Name");
      var g = document.createElement("IMG");
      g.setAttribute("src", "img/delete.png");
      increment();
      y.setAttribute("Name", "quantityordered_" + i);
      r.appendChild(y);
      g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
      r.appendChild(g);
      r.setAttribute("id", "id_" + i);
      document.getElementById("myForm").appendChild(r);
  
  
      var r = document.createElement('span');
      var y = document.createElement("INPUT");
      y.setAttribute("type", "text");
      y.setAttribute("placeholder", "QTY Delivered");
      var g = document.createElement("IMG");
      g.setAttribute("src", "img/delete.png");
      increment();
      y.setAttribute("Name", "quantitydelivered_" + i);
      r.appendChild(y);
      g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
      r.appendChild(g);
      r.setAttribute("id", "id_" + i);
      document.getElementById("myForm").appendChild(r);
  
      var r = document.createElement('span');
      var y = document.createElement("INPUT");
      y.setAttribute("type", "text");
      y.setAttribute("placeholder", "Description");
      var g = document.createElement("IMG");
      g.setAttribute("src", "img/delete.png");
      increment();
      y.setAttribute("Name", "description_" + i);
      r.appendChild(y);
      g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
      r.appendChild(g);
      r.setAttribute("id", "id_" + i);
      document.getElementById("myForm").appendChild(r);
  
      var r = document.createElement('span');
      var y = document.createElement("INPUT");
      y.setAttribute("type", "text");
      y.setAttribute("placeholder", "Price ie; £15.00");
      var g = document.createElement("IMG");
      g.setAttribute("src", "img/delete.png");
      increment();
      y.setAttribute("Name", "price_" + i);
      r.appendChild(y);
      g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
      r.appendChild(g);
      r.setAttribute("id", "id_" + i);
      document.getElementById("myForm").appendChild(r);
  }
  
  //Functions that will be called upon, when user click on the Reset Button.
  function resetElements() {
      document.getElementById('myForm').innerHTML = '';
  }
  </code></pre>
  
  <p><strong>HTML</strong>
  </p>
  
  <pre><code>&lt;div class="col-md-12" style="margin-top:20px; padding-left:30px;"&gt;
      &lt;button type="button" onclick="nameFunction()" class="btn btn-info"&gt;
        &lt;i class="fa fa-plus"&gt;&lt;/i&gt; 
        Add another Item
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I hope this helps? Please note Iam new to JS and thought this would be a great project to dive into etc.</p>
  
  <p>Many thanks in advance for any advice anyone can give </p>