Question

我遇到一些问题，让removeElement函数按预期工作。我希望addElement函数添加一个带有下拉列表的新输入组和一个删除按钮（它可以）。 “删除”按钮应该调用removeElement函数，删除相应的输入组，它首次执行但不再执行

以下是代码：

		function addElement(parentId, elementTag, elementId, html) {
			// Adds an element to the document
			var p = document.getElementById(parentId);
			var newElement = document.createElement(elementTag);
			newElement.setAttribute('id', elementId);
			newElement.innerHTML = html;
			p.appendChild(newElement);
		}

		function removeElement(elementId) {
			// Removes an element from the document
			var element = document.getElementById(elementId);
			element.parentNode.removeChild(element);
		}

		var serviceID = 0;	// reset number of services added

		function addService() {
			serviceID++;	// increment for UID for new input
			var html = `<div class="form-row"><div class="form-group col-6"><select name="service[]" class="form-control"><option value="basic">Basic Service</option><option value="full">Full Service</option><option value="tie">Ski Tie</option></select></div><div class="form-group col-3"><input type="button" class="btn btn-danger" onclick="javascript:removeElement('service' + serviceID + ''); return false;" value="Remove"></div></div>`;
			addElement('services', 'div', 'service' + serviceID, html);
		}

 <div id="services">

      <h4>Services</h4><br>

      <div class="form-row">
        <div class="form-group col-6">
          <select name="service[]" class="form-control">
            <option value="basic">Basic Service</option>
            <option value="full">Full Service</option>
            <option value="tie">Ski Tie</option>
          </select>
        </div>
      </div><br>

Answer 1

您的代码中似乎存在两个问题（基于您共享的内容）

serviceID需要全局声明，以便onclick处理程序可以访问它。
没有为 id 指定任何元素作为services

像

<h4 id="services">Services</h4><br>

最后，您还需要调用addService方法。

<强>演示

var serviceID = 0;
function addElement(parentId, elementTag, elementId, html) {
  // Adds an element to the document
  var p = document.getElementById(parentId);
  var newElement = document.createElement(elementTag);
  newElement.setAttribute('id', elementId);
  newElement.innerHTML = html;
  p.appendChild(newElement);
}

function removeElement(elementId) {
  // Removes an element from the document
  var element = document.getElementById(elementId);
  element.parentNode.removeChild(element);
}

function addService() {
  serviceID++; // increment for UID for new input
  var html = `<div class="form-row"><div class="form-group col-6"><select name="service[]" class="form-control"><option value="basic">Basic Service</option><option value="full">Full Service</option><option value="tie">Ski Tie</option></select></div><div class="form-group col-3"><input type="button" class="btn btn-danger" onclick="javascript:removeElement('service' + serviceID + ''); return false;" value="Remove"></div></div>`;
  addElement('services', 'div', 'service' + serviceID, html);
}

addService() ;

<h4 id="services">Services</h4><br>

  <div class="form-row">
    <div class="form-group col-6">
      <select name="service[]" class="form-control">
        <option value="basic">Basic Service</option>
        <option value="full">Full Service</option>
        <option value="tie">Ski Tie</option>
      </select>
    </div>
  </div>

JavaScript：删除HTML表单输入组

1 个答案: