添加/删除多个输入字段

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>

我有这三个字段（“项目、数量和成本”），这三个字段在单击 + 按钮时逐渐添加，但我在单击时删除了这些按钮。 我只需要一键添加这三个输入字段并一键删除这些字段。这些字段名称也应该递增。

<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;"