Javascript 添加/删除多个输入字段 选择项目： 没有可用的项目 数量： 成本（每件）： +

我有这三个字段（“项目、数量和成本”），这三个字段在单击+按钮时以增量方式添加，但我在单击时删除了这些按钮。 我只需要一次单击就可以添加这三个输入字段，一次单击就可以删除这些字段。此外，这些字段名称应递增

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

函数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）；
}

您可以使用与以下类似的语法删除引用父元素的元素：

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

与此处描述的内容类似：

---

也可以考虑CSS样式属性的切换：“代码>”显示：没有；“

> P>有几个问题：

• 避免在javascript中放入HTML块，将HTML放入HTML文件中
• 避免ID，尤其是当它们肯定会重复时。重复的ID是非法的。通过查找只能找到第一个
• 避免将文本字符串连接在一起以生成HTML。这样做很容易出错，并在代码中添加XSS漏洞

（函数（$）{
“严格使用”；
var itemTemplate=$（'.example template'）.detach（），
editArea=$（'.edit area'），
itemNumber=1；
$（文档）。在（'单击'，'上。编辑区域。添加'，函数（事件）{
var item=itemTemplate.clone（）；
item.find（'[name]'）.attr（'name'，function（）{
返回$（this）.attr（'name'）+'\'+itemNumber；
});
++项目编号；
项目.附录（编辑区）；
});
$（文档）.on（'单击'，'）。编辑area.rem'，函数（事件）{
editArea.children（'.example template'）.last（）.remove（）；
});
$（文档）.on（'单击'，'）。编辑区域.del'，函数（事件）{
var target=$（event.target），
行=target.closest（'.example template'）；
row.remove（）；
});
}（jQuery））
.hidden{display:none；}
.formfield{float:left；}
.示例模板{clear:left；}

-
+
-
您能给我分享一个与我使用的上述代码相关的代码吗。。。我已经尝试了我能想到的每一种可能的方法，但没能如愿以偿
var childElement = document.getElementById("myChildElement");
document.getElementById("myElement").removeChild(childElement);