CODEWITHSUNDEEP
javascripthtmlcssformsdom
Nic
Nic

Reputation: 127

Removing a class and adding another class (Appending the HTML tag onclick)

Would I be able to add a remove button to replace the add button as of the image below and remove the values in that row from the array object that I have declared whenever I remove a certain row?

Image of the html (Partly)

Before Clone

Before Clone

After Clone

After Clone

Desired Result

Desired Result

Html page

                <div id="selections">
                  <div class="form-group row controls selection">
                      <label for="selection01" class="col-sm-2 col-form-label">Selection Pair</label>
                      <div class="col-sm-2">
                          <select class="form-control selection01" id="selection010" placeholder="Selection 01" onchange="addNewSelection()"></select>
                      </div>
                      <div class="col-sm-2">
                          <select class="form-control selection02" id="selection020" placeholder="Selection 02" onchange="addNewSelection()"></select>
                      </div>
                      <div class="col-sm-2">
                        <input type="number" min="0.00" max="10000.00" step="1.00" class="form-control" id="productQuantity0" placeholder="Quantity">
                      </div>
                      <div class="col-sm-2">
                        <input type="button" class="btn btn-success" id="addSelection" value="Add Selection" onclick="addNewSelectionPair()"></button>
                      </div>
                  </div> 
                </div>

Script

  function addNewSelectionPair() {
    // Get all selections by class
    var selection = document.getElementsByClassName('selection');

    // Get the last one
    var lastSelection = selection[selection.length - 1];

    // Clone it
    var newSelection = lastSelection.cloneNode(true);

    // Update the id values for the input
    newSelection.children[1].children[0].id = 'selection01' + selection.length;
    newSelection.children[2].childrne[0].id = 'selection02' + selection.length;
    newSelection.children[3].children[0].id = 'productQuantity' + selection.length;    

    // Add it to selectionss
    document.getElementById('selections').appendChild(newSelection)
  }

  function getValues() {
    // Get all selections by class
    var selections = document.getElementsByClassName('selection');
    var values = [];

    for(var i = 0; i < selections.length; i++) {
      // Add the values into the array
      values.push([
        document.getElementById('selection01' + i).value,
        document.getElementById('selection02' + i).value
        document.getElementById('productQuantity' + i).value
      ]);
    }

    return values;
  }

Upvotes: 0

Views: 78

Answers (1)

Jack
Jack

Reputation: 1999

This script will duplicate the last row of inputs. It will also collect the inputs and store their values in a 3d array to process.

function addSection() {
  //Get all sections by class
  var sections = document.getElementsByClassName('section');

  //Get the last one
  var lastSection = sections[sections.length - 1];
  
  //Clone it
  var newSection = lastSection.cloneNode(true);

  //Add it do sections
  document.getElementById('sections').appendChild(newSection);
  
  //Recalucate the Ids for the removal 
  //Ids all get shifted after adding or removing a section
  calcRemovalIds();
}

function getValues() {
  //Get all inputs by class
  var sectionsOne = document.getElementsByClassName('section01');  
  var sectionsTwo = document.getElementsByClassName('section02');

  var values = [];
  
  //Loop the inputs
  for(var i = 0; i < sectionsOne.length; i++) {
    //Add the values to the array
    values.push([
      sectionsOne[i].value, 
      sectionsTwo[i].value
    ]);
  }
  
  return values;
}

function removeSection(id = undefined) {
  //Get all sections by class
  var sections = document.getElementsByClassName('section');

  //If there is only one row left, just skip
  if (sections.length == 1) return true;

  //If not id was given, remove the last row
  if (id == undefined) id = sections.length - 1;

  //Get the last one
  var lastSection = sections[id];
  
  //Remove it
  lastSection.parentNode.removeChild(lastSection);
  
  //Recalucate the Ids for the removal 
  //Ids all get shifted after adding or removing a section
  calcRemovalIds();
}

function calcRemovalIds() {
  var btns = document.getElementsByClassName('button');
  
  for (var i = 0; i < btns.length; i++) {
    //Check if its the last button
    if (i + 1 == btns.length) {
      //Make it a addSection button
      btns[i].innerHTML = '+';  
      btns[i].setAttribute('onclick', 'addSection()');
    } else {
      //Make is a removeSection button
      btns[i].innerHTML = '-';  
      btns[i].setAttribute('onclick', 
        'removeSection(' + i +')'
      );
    }
  }
}
<div>
  <div>
    <h2>Product</h2>
    <input id="product" placeholder="Product" />
  </div>
  <div id="sections">
    <div class="section">
      <input class="section01" placeholder="Section One" />
      <input class="section02" placeholder="Section Two" />
      <button class="button" onclick="addSection()">+</button>
    </div>
  </div>
</div>

<button onclick="
  document.getElementById('values').innerHTML = JSON.stringify(getValues());
">Get Values</button>

<div id="values"></div>

Upvotes: 1

Related Questions