添加/删除多个输入字段

Question

<div class="form-inline"> 

    <div class="form-group col-lg-4"> 

    <label>Select Item:</label> 

    <div id="field1"> 
     <select class="form-control" name="item_1"> 
     <?php if($item !=0){foreach ($item as $list_item){?> 
     <option value="<?php echo $list_item['item'];?>"> 
      <?php echo $list_item[ 'item'];?> 
     </option> 

     <?php }}else {?> 
     <option value="">No Items Available</option> 
     <?php }?> 
     </select> 

    </div> 
    </div> 
    <div class="form-group col-lg-2"> 

    <label>Quantity:</label> 
    <div id="field2"> 
     <input type="number" min="1" class="form-control input-md" name="quantity_1" /> 
    </div> 
    </div> 


    <div class="form-group col-lg-3"> 

    <label>Cost(per piece):</label> 
    <div id="field3"> 
     <input type="number" min="1" class="form-control input-md" name="cost_1" /> 
    </div> 
    </div> 
    <div class="form-group col-lg-3" style="margin-top:25px"> 
    <div id="field4"> 
     <button id="addmore" onclick="add();" class="btn add-more" type="button">+</button> 
    </div> 
    </div> 
</div> 

我有这三个字段（'item，quantity and cost'），这三个字段是在点击+按钮时递增添加的，但是我要删除这些按钮。 我只需要一次点击就可以添加这三个输入字段，并且一次点击就可以删除这些字段。这些字段的名称也应该增加。

<script> 
    function add() { 
    i++; 
    var div1 = document.createElement('div'); 
    div1.innerHTML = '<select class="form-control" name="item_' + i + '"> <option value=""></option></select>'; 
    document.getElementById('field1').appendChild(div1); 

    var div2 = document.createElement('div'); 
    div2.innerHTML = '<input type="number" min="1" class="form-control input-md" name="quantity_' + i + '" />'; 
    document.getElementById('field2').appendChild(div2); 

    var div3 = document.createElement('div'); 
    div3.innerHTML = '<input type="number" min="1" class="form-control input-md" name="cost_' + i + '" />'; 
    document.getElementById('field3').appendChild(div3); 

    var div4 = document.createElement('div'); 
    div4.innerHTML = '<button id="remove" onclick="remove_btn(this)" class="btn remove" type="button">-</button>'; 
    document.getElementById('field4').appendChild(div4); 
    } 
</script> 

Answer 1

有几个问题：

• 避免把HTML的斑点在你的JavaScript，把你的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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hidden"> 
 
    <div class="example-template"> 
 
    <div class="formfield"><input placeholder="Name" name="name"></div> 
 
    <div class="formfield"><input placeholder="Addr" name="addr"></div> 
 
    <div class="formfield"><input placeholder="Post" name="post"></div> 
 
    <div class="formfield"><button class="del">-</button></div> 
 
    </div> 
 
</div> 
 

 
<div class="edit-area"> 
 
    <div class="controls"> 
 
    <button class="add">+</button> 
 
    <button class="rem">-</button> 
 
    </div> 
 
</div>

这是通过先获取该行模板出来的隐藏div元素，并将其存储在一个变量。每次需要创建新行时，它都会克隆模板并进行更新。它通过根据需要调整名称元素来更新它，附加“_”和一个数字。一旦它定制了该模板的副本，它会将其附加到编辑区域。

Answer 2

可以使用类似的语法有以下删除元素与父参考：

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

这里描述的内容是相似的：http://www.w3schools.com/js/js_htmldom_nodes.asp

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