添加/删除多个输入字段

 
 Select Item: 
   <option value="">    No Items Available   
 
 
 Quantity: 
  
 
 
 Cost(per piece): 
  
 
 
 
 + 
 
  

我有这三个字段（’项目，数量和成本’），这三个字段是在点击+按钮时逐步添加的，但我正在删除这些按钮 – 单击。 我只需要在一次点击时添加这三个输入字段，并在一次点击中删除这些字段。 这些字段名称也应该递增。

  function add() { i++; var div1 = document.createElement('div'); div1.innerHTML = ' '; document.getElementById('field1').appendChild(div1); var div2 = document.createElement('div'); div2.innerHTML = ''; document.getElementById('field2').appendChild(div2); var div3 = document.createElement('div'); div3.innerHTML = ''; document.getElementById('field3').appendChild(div3); var div4 = document.createElement('div'); div4.innerHTML = '-'; document.getElementById('field4').appendChild(div4); }  

Answer 1

有几个问题：

• 避免在您的javascript中添加HTML blob，将HTML放入HTML文件中。
• 避免使用ID，特别是当它们肯定会被复制时。 重复的ID是非法的。 只有第一个可以找到查找。
• 避免将文本字符串连接在一起以生成HTML。 这样做很容易出错并在代码中放入XSS漏洞。

 (function($) { "use strict"; var itemTemplate = $('.example-template').detach(), editArea = $('.edit-area'), itemNumber = 1; $(document).on('click', '.edit-area .add', function(event) { var item = itemTemplate.clone(); item.find('[name]').attr('name', function() { return $(this).attr('name') + '_' + itemNumber; }); ++itemNumber; item.appendTo(editArea); }); $(document).on('click', '.edit-area .rem', function(event) { editArea.children('.example-template').last().remove(); }); $(document).on('click', '.edit-area .del', function(event) { var target = $(event.target), row = target.closest('.example-template'); row.remove(); }); }(jQuery)); 

 .hidden { display: none; } .formfield { float: left; } .example-template { clear: left; } 

  
 
 
 
 
 
-
 
 
 
 
 + - 
  

Answer 2

您可以使用类似语法删除具有对父项的引用的元素，如下所示：

 var childElement = document.getElementById("myChildElement"); document.getElementById("myElement").removeChild(childElement); 

与此处描述的类似： http ： //www.w3schools.com/js/js_htmldom_nodes.asp

另外，考虑一下CSS样式属性的切换： "display: none;"