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的实现。除了重新加载页面之外，它实际上并没有删除任何内容，因为您正在使用锚标记<a>。

如果您查看日志，则应该看到Uncaught ReferenceError: removeElement is not defined。

其他一些问题：

id不能包含Vehicle 2
将string传递给函数时，需要添加引号。例如，removeElement(Vehicle 2)不是有效的string

Answer 2

没有＆＃34; removeElement＆＃34;功能。可能是JavaScript错误导致您的浏览器刷新，因为它位于链接上，return false因错误而无法运行。

您应首先将删除链接更改为按钮，然后修复＆＃34; removeElement＆＃34;脚本like this。

在javascript中只删除1个动态元素

2 个答案: