<div class="container"> <div class="mb-3"> <label for="name" class="form-label">姓名</label> <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="药物" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-danger" type="button" id="button-addon2" >删除</button> </div> <button type="submit" class="btn btn-primary">提交</button> <button type="submit" class="btn btn-success">增加</button> </div> 如何动态增加一模一样药物输入框

可以使用 JavaScript 实现动态增加药物输入框，具体实现步骤如下：

1. 给“增加”按钮绑定点击事件，点击按钮时动态增加一个药物输入框。

2. 在点击事件中创建一个新的输入框元素，并设置其属性和样式。

3. 将新的输入框元素添加到表单中。

下面是示例代码：

<div class="container">
  <div class="mb-3">
    <label for="name" class="form-label">姓名</label>
    <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
  </div>
  <div id="medicines">
    <div class="input-group mb-3">
      <input type="text" class="form-control medicine-input" placeholder="药物" aria-label="Recipient's username" aria-describedby="button-addon2">
      <button class="btn btn-danger delete-button" type="button" id="button-addon2">删除</button>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
  <button type="button" class="btn btn-success add-button">增加</button>
</div>

<script>
  // 获取元素
  const medicinesDiv = document.getElementById('medicines');
  const addButton = document.querySelector('.add-button');
  const deleteButtons = document.querySelectorAll('.delete-button');

  // 定义增加输入框的函数
  function addMedicineInput() {
    // 创建新的输入框元素
    const inputGroup = document.createElement('div');
    inputGroup.classList.add('input-group', 'mb-3');
    const input = document.createElement('input');
    input.type = 'text';
    input.classList.add('form-control', 'medicine-input');
    input.placeholder = '药物';
    input.setAttribute('aria-label', 'Recipient\'s username');
    input.setAttribute('aria-describedby', 'button-addon2');
    const deleteButton = document.createElement('button');
    deleteButton.classList.add('btn', 'btn-danger', 'delete-button');
    deleteButton.type = 'button';
    deleteButton.id = 'button-addon2';
    deleteButton.textContent = '删除';
    // 绑定删除按钮的点击事件
    deleteButton.addEventListener('click', () => {
      inputGroup.remove();
    });
    // 将新的元素添加到表单中
    inputGroup.appendChild(input);
    inputGroup.appendChild(deleteButton);
    medicinesDiv.appendChild(inputGroup);
  }

  // 绑定增加按钮的点击事件
  addButton.addEventListener('click', addMedicineInput);

  // 绑定删除按钮的点击事件
  deleteButtons.forEach((button) => {
    button.addEventListener('click', () => {
      button.parentNode.parentNode.remove();
    });
  });
</script>

在上面的代码中，我们将药物输入框包裹在一个 `<div>` 元素中，并为这个 `<div>` 元素设置了一个 id，方便后面操作。我们还定义了一个增加输入框的函数 `addMedicineInput()`，在这个函数中，我们创建了一个新的输入框元素，并将其添加到表单中。当用户点击“增加”按钮时，我们调用这个函数来增加输入框。同时，我们也为每个删除按钮绑定了点击事件，在点击时删除对应的输入框。