删除一个类并添加另一个类（附加 HTML 标签 onclick）

Question

我是否能够添加一个删除按钮来替换下图所示的添加按钮，并从每当删除某一行时声明的数组对象中删除该行中的值？

html 图像（部分）

克隆之前

克隆后

期望的结果

网页

                <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>  

脚本

  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)

  }

Answer 1

该脚本将复制最后一行输入。它还将收集输入并将其值存储在 3d 数组中以进行处理。function addSection() {&nbsp; //Get all sections by class&nbsp; var sections = document.getElementsByClassName('section');&nbsp; //Get the last one&nbsp; var lastSection = sections[sections.length - 1];&nbsp;&nbsp;&nbsp; //Clone it&nbsp; var newSection = lastSection.cloneNode(true);&nbsp; //Add it do sections&nbsp; document.getElementById('sections').appendChild(newSection);&nbsp;&nbsp;&nbsp; //Recalucate the Ids for the removal&nbsp;&nbsp; //Ids all get shifted after adding or removing a section&nbsp; calcRemovalIds();}function getValues() {&nbsp; //Get all inputs by class&nbsp; var sectionsOne = document.getElementsByClassName('section01');&nbsp;&nbsp;&nbsp; var sectionsTwo = document.getElementsByClassName('section02');&nbsp; var values = [];&nbsp;&nbsp;&nbsp; //Loop the inputs&nbsp; for(var i = 0; i < sectionsOne.length; i++) {&nbsp; &nbsp; //Add the values to the array&nbsp; &nbsp; values.push([&nbsp; &nbsp; &nbsp; sectionsOne[i].value,&nbsp;&nbsp; &nbsp; &nbsp; sectionsTwo[i].value&nbsp; &nbsp; ]);&nbsp; }&nbsp;&nbsp;&nbsp; return values;}function removeSection(id = undefined) {&nbsp; //Get all sections by class&nbsp; var sections = document.getElementsByClassName('section');&nbsp; //If there is only one row left, just skip&nbsp; if (sections.length == 1) return true;&nbsp; //If not id was given, remove the last row&nbsp; if (id == undefined) id = sections.length - 1;&nbsp; //Get the last one&nbsp; var lastSection = sections[id];&nbsp;&nbsp;&nbsp; //Remove it&nbsp; lastSection.parentNode.removeChild(lastSection);&nbsp;&nbsp;&nbsp; //Recalucate the Ids for the removal&nbsp;&nbsp; //Ids all get shifted after adding or removing a section&nbsp; calcRemovalIds();}function calcRemovalIds() {&nbsp; var btns = document.getElementsByClassName('button');&nbsp;&nbsp;&nbsp; for (var i = 0; i < btns.length; i++) {&nbsp; &nbsp; //Check if its the last button&nbsp; &nbsp; if (i + 1 == btns.length) {&nbsp; &nbsp; &nbsp; //Make it a addSection button&nbsp; &nbsp; &nbsp; btns[i].innerHTML = '+';&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; btns[i].setAttribute('onclick', 'addSection()');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; //Make is a removeSection button&nbsp; &nbsp; &nbsp; btns[i].innerHTML = '-';&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; btns[i].setAttribute('onclick',&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 'removeSection(' + i +')'&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; }}<div>&nbsp; <div>&nbsp; &nbsp; <h2>Product</h2>&nbsp; &nbsp; <input id="product" placeholder="Product" />&nbsp; </div>&nbsp; <div id="sections">&nbsp; &nbsp; <div class="section">&nbsp; &nbsp; &nbsp; <input class="section01" placeholder="Section One" />&nbsp; &nbsp; &nbsp; <input class="section02" placeholder="Section Two" />&nbsp; &nbsp; &nbsp; <button class="button" onclick="addSection()">+</button>&nbsp; &nbsp; </div>&nbsp; </div></div><button onclick="&nbsp; document.getElementById('values').innerHTML = JSON.stringify(getValues());">Get Values</button><div id="values"></div>