javascript - 仅删除 javascript 中的 1 个动态元素

Question

我正在尝试创建一个表单，您可以在其中添加多个输入字段，但也可以单独删除每个输入字段。这是我到目前为止得到的:

HTML:

    <input type="hidden" value="1" id="theValue" />
<div class="form-horizontal vehicleclass0">
    <select class="vehicleclass" name="contact['Vehicle0']">
        <option value="" style="color: #cecece !important;">--Vehicle type--</option>
        <option value="Car">Car</option>
        <option value="Truck">Truck</option>
        <option value="Boat">Boat</option>
        <option value="Tractor">Tractor</option>
    </select>
    <input type="text" class="vehicleclass" name="contact[Make-Model Vehicle0]" placeholder="Make/Model" autocapitalize="off">
</div>
<div id="myDiv"></div>
<a href="javascript:;" onclick="addElement();"><div class="addvehiclewrapper" id="plus">Add another vehicle</div></a>

Javascript:

    function addElement() {

          var ni = document.getElementById('myDiv');

          var numi = document.getElementById('theValue');

          var num = (document.getElementById('theValue').value - 1) + 2;

          numi.value = num;

          var newdiv = document.createElement('div');

          var divIdName = 'Vehicle'+ num +'';

          newdiv.setAttribute('id', divIdName);

          newdiv.innerHTML = '<div class="form-horizontal"><select class="vehicleclass" name="contact[' + divIdName + ']"><option value="" style="color: #cecece !important;">--Vehicle type--</option><option value="Car">Car</option><option value="Truck">Truck</option><option value="Boat">Boat</option><option value="Tractor">Tractor</option></select><input type="text" class="vehicleclass" name="contact[Make-Model ' + divIdName + ']" placeholder="Make/Model" autocapitalize="off"></div> <a href="" onclick="javascript:removeElement('+ divIdName +'); return false">Remove ' + divIdName + '</a>';

          ni.appendChild(newdiv);

      }
function removeElement(divNum) {

  var d = document.getElementById('myDiv');

  var olddiv = document.getElementById(divNum);

  d.removeChild(olddiv);

}

一切工作正常，除了当您单击“删除车辆”时，它会立即删除所有添加的输入字段。需要更改什么才能使其仅删除单个字段？

JS fiddle

感谢您的回复，我删除了 id 中的空格并添加了一个removeElement函数。

但它仍然无法正常工作。缺什么？非常感谢

Answer 1

您没有实现 removeElement在你的 fiddle 中。它实际上并没有删除任何内容，而是重新加载页面，因为您使用的是 anchor 标记 <a> .

如果您检查日志，您应该会看到 Uncaught ReferenceError: removeElement is not defined .

其他一些问题:

• id不能有像 Vehicle 2 这样的空格
• 传递 string 时需要添加引号到一个函数。例如，removeElement(Vehicle 2)不是有效的 string