删除动态生成的行

Question

我有一些代码可以动态添加行，并且在其中添加（+）和删除（-）按钮用于添加行和删除行功能。对于添加的每一行，添加行均使用一个新的ID，但是我在将动态行ID传递给生成的行按钮以删除行时遇到问题。任何帮助表示赞赏。我的代码如下，谢谢！

var i = 0;
var original = document.getElementById('addRow' + i);

function addRow() {
  var clone = original.cloneNode(true);
  clone.id = "addRow" + ++i;
  original.parentNode.appendChild(clone);
}

function deleteRow() {
  var original = document.getElementById();
  alert(original.id);
}

<div class="row" id="addRow0">
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="scienceField" name="scienceField" onchange="toggleInput()" required>
      <option value="">Field of Science...</option>
    </select>
  </div>
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="investigationSubject" name="investigationSubject" onchange="toggleInput()" required>
      <option value="">Subject of Investigation...</option>
    </select>
  </div>
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="knowledgeArea" name="knowledgeArea" required>
      <option value="">Knowledge Areas...</option>
    </select>
  </div>
  <div class="col-md-1 mb-3">
    <input type="text" class="form-control" id="classifiedActivitiesPercentage" name="classifiedActivitiesPercentage" placeholder="%" required>
    <div class="invalid-feedback">Please enter valid percent value.</div>
  </div>
  <button onclick="deleteRow()" class="btn btn-primary btn-md mb-3 mr-3">-</button>
  <button onclick="addRow()" class="btn btn-primary btn-md mb-3">+</button>
</div>

Answer 1

尽管您可以使用id来完成这项工作，但它需要的代码和逻辑超出了必要，并且最终是一种脆弱的解决方案，无法很好地扩展。

最简单的添加方法是仅克隆包含刚刚单击的添加按钮的行。对于删除，只需删除包含刚刚单击的删除按钮的行。这是通过 element.closest() 方法完成的。

此外，您不应使用HTML事件属性（onclick等）来设置事件处理程序。那是一种拥有25年以上历史的技术，它是如此的普遍，它不会像应该的那样消亡。 There are many reasons not to set up events this way. 不想相信我吗？ Read this then. ，而是使用JavaScript进行所有事件处理。并且，由于您要动态添加新按钮，因此需要将这些按钮绑定到事件处理程序。最好的方法是使用 event delegation 。

最后，我们只能使用一个事件处理功能来处理添加和删除操作。我们只需要知道按下了哪个按钮即可。

在下面的HTML中，请注意，add类已添加到+按钮中，而delete按钮中又添加了-类。另外，请注意，onclick事件属性和行id已被完全删除。

// Set up delegated event handling so that all buttons will be wired
// to appropriate handlers
document.addEventListener("click", function(evt){
  let original = evt.target.closest(".row");  // Find the nearest ancestor that has the row class

  // Check the element that originally triggered the event
  // and see if "add" or "delete" is in its list of classes.
  if(evt.target.classList.contains("add") || evt.target.classList.contains("delete")){
    // Call a single event handler and pass it the event, the originating event element
    // and the content of that element
    addRemove(evt.target, original);  
  }  
});

function addRemove(target, original) {
  // If the originating event element contains the "add" class
  if(target.classList.contains("add")){
    // Clone the original row and append the clone to the document 
    original.parentNode.appendChild(original.cloneNode(true));
  } else {
    // It must be the delete button that was clicked
    original.remove();   // Remove the original row
  }
}

<div class="row">
  <div class="col-md-3 mb-3">
     <select class="custom-select d-block w-100" style="font-size: 1rem" id="scienceField" name="scienceField" onchange="toggleInput()" required>
       <option value="">Field of Science...</option>
     </select>
  </div>
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="investigationSubject" name="investigationSubject" onchange="toggleInput()" required>
      <option value="">Subject of Investigation...</option>
    </select>
  </div>
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="knowledgeArea" name="knowledgeArea" required>
      <option value="">Knowledge Areas...</option>
    </select>
  </div>
  <div class="col-md-1 mb-3">
    <input type="text" class="form-control" id="classifiedActivitiesPercentage" name="classifiedActivitiesPercentage" placeholder="%" required>
      <div class="invalid-feedback">Please enter valid percent value.</div>
  </div>
  <button class="btn btn-primary btn-md mb-3 mr-3 delete">-</button>
  <button class="btn btn-primary btn-md mb-3 add">+</button>
</div>

Answer 2

您还可以用JavaScript对象表示行，然后您的“减号”按钮可以引用该对象中实例化的HTML，从而摆脱ID。

请参见下面的代码段

var template = document.getElementById('rowTemplate');

function Row() {
  this.node = document.importNode(template.content, true);
  this.content = Array.prototype.slice.call(this.node.childNodes);
  
  this.minusButton = document.createElement("button");
  this.minusButton.innerHTML = '-';
  this.minusButton.className = 'btn btn-primary btn-md mb-3 mr-3';
  this.minusButton.addEventListener('click', () => {
    this.delete();
  });
  
  this.content.push(this.minusButton);
   
  this.plusButton = document.createElement("button");
  this.plusButton.innerHTML = '+';
  this.plusButton.className = 'btn btn-primary btn-md mb-3 mr-3';
  this.plusButton.addEventListener('click', () => {
    new Row();
  });
  
  this.content.push(this.plusButton);
  
  this.content.forEach(x => template.parentNode.appendChild(x));
}

Row.prototype.delete = function() {
  this.content.forEach(x => x.parentNode.removeChild(x));
}

new Row();

<template id="rowTemplate">
<div class="row">
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="scienceField" name="scienceField" onchange="toggleInput()" required>
      <option value="">Field of Science...</option>
    </select>
  </div>
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="investigationSubject" name="investigationSubject" onchange="toggleInput()" required>
      <option value="">Subject of Investigation...</option>
    </select>
  </div>
  <div class="col-md-3 mb-3">
    <select class="custom-select d-block w-100" style="font-size: 1rem" id="knowledgeArea" name="knowledgeArea" required>
      <option value="">Knowledge Areas...</option>
    </select>
  </div>
  <div class="col-md-1 mb-3">
    <input type="text" class="form-control" id="classifiedActivitiesPercentage" name="classifiedActivitiesPercentage" placeholder="%" required>
    <div class="invalid-feedback">Please enter valid percent value.</div>
  </div>
</div>
</template>