删除表单字段 javascript

Question

我有一个表格，其中有一个员工表，每次单击时都会添加一个员工的新行，但是当我单击删除字段时，脚本会添加一个新行直到最大值。所以我想要的是“-”图标来删除添加的字段。

这是我到目前为止想出的......

$(document).ready(function () {

  // Input fields increment limitation
  var maxField = 3;
  // Add button selector
  var addButton = $('.add_button');
  // Input field wrapper
  var emp = $('#employee_tbl');
  // New input field html 
  var fieldHTML = '<tr><td><label for="employee"><i class="fas fa-minus-circle"></i></label><input type="text" name="employee" class="remove_button" id="employee" required></td></tr>';
  // Initial field counter is 1
  var x = 1;

  // Once add button is clicked
  $(addButton).click(function () {
    // Check maximum number of input fields
    if (x < maxField) { 
      // Increment field counter
      x++;
      // Add field html
      $(emp).append(fieldHTML);
    }
  });

  // Once remove button is clicked
  $(emp).on('click', '.remove_button', function (e) {
    e.preventDefault();
    // Remove field html
    $(this).parent('div').remove();
    // Decrement field counter
    x--;
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>

<table id="employee_tbl">
  <tr>
    <th>
      <b><span data-i18n-key="employee">Employee</span></b>
    </th>
  </tr>
  <tr>
    <td>
      <label for="employee"><i class="fas fa-plus-circle"></i></label>
      <input type="text" name="employee"  class="add_button" id="employee" required/>
    </td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您正在删除 parent('div') 而没有人。请改用closest('tr')。

此外，您的课程 add_button 和 remove_button 使用了错误的元素。
而id 在 HTML 中应该是唯一的。

$(document).ready(function () {

  // Input fields increment limitation
  var maxField = 3;
  // Add button selector
  var addButton = $('.add_button');
  // Input field wrapper
  var emp = $('#employee_tbl');
  // New input field html 
  var fieldHTML = '<tr><td><label for="employee"><i class="fas fa-minus-circle remove_button"></i></label><input type="text" name="employee" required></td></tr>';
  // Initial field counter is 1
  var x = 1;

  // Once add button is clicked
  $(addButton).click(function () {
    // Check maximum number of input fields
    if (x < maxField) { 
      // Increment field counter
      x++;
      // Add field html
      $(emp).append(fieldHTML);
    }
  });

  // Once remove button is clicked
  $(emp).on('click', '.remove_button', function (e) {
    e.preventDefault();
    // Remove field html
    $(this).closest('tr').remove();
    // Decrement field counter
    x--;
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>

<table id="employee_tbl">
  <tr>
    <th>
      <b><span data-i18n-key="employee">Employee</span></b>
    </th>
  </tr>
  <tr>
    <td>
      <label for="employee"><i class="fas fa-plus-circle add_button"></i></label>
      <input type="text" name="employee" required/>
    </td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

首先，OP 需要清理 HTML 结构。

由于标签-控制关系的处理方式，当前使用的内容过于复杂，并且经常面临成为无效标记的风险。 "label for="<id>"" 管理是不需要的，尤其是因为使用这种结构总是有提供相同id 值的危险。

因此，第一个更改提供了一个通用的 id 不可知结构 ...

<tr>
  <td>
    <label for="employee"><i class="fas fa-plus-circle"></i></label>
    <input type="text" name="employee"  class="add_button" id="employee" required/>
  </td>
</tr>

...更改为...

<tr>
  <td>
    <label>
      <i class="fas fa-plus-circle add_button"></i>
      <input type="text" name="employee" required/>
    </label>
  </td>
</tr>

...对于所有可移动的行...

<tr>
  <td>
    <label>
      <i class="fas fa-minus-circle remove_button"></i>
      <input type="text" name="employee" required/>
    </label>
  </td>
</tr>

查看上述两个代码块，您可能还会注意到 'add_button' 和 'remove_button' 的类名更改为它们真正属于的位置......每个都更改为其图标化的添加/删除元素。

因此，唯一必要的 JavaScript/jQuery 代码更改需要在删除处理程序中进行。由于 OP 已经利用了事件委托，因此只需访问 event 对象的 target 引用。从那里查询最近的</tr> 元素，然后将其删除。

证明...

$(document).ready(function () {

  // Input fields increment limitation
  var maxField = 3;
  // Add button selector
  var addButton = $('.add_button');
  // Input field wrapper
  var emp = $('#employee_tbl');
  // New input field html 
  var fieldHTML = `
    <tr>
      <td>
        <label>
          <i class="fas fa-minus-circle remove_button"></i>
          <input type="text" name="employee" required/>
        </label>
      </td>
    </tr>`;
  // Initial field counter is 1
  var x = 1;

  // Once add button is clicked
  $(addButton).click(function () {
    // Check maximum number of input fields
    if (x < maxField) { 
      // Increment field counter
      x++;
      // Add field html
      $(emp).append(fieldHTML);
    }
  });

  // Once remove button is clicked
  $(emp).on('click', '.remove_button', function (evt) {
    evt.preventDefault();

    // Remove field html
    $(evt.target).closest('tr').remove();
    // Decrement field counter
    x--;
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>

<table id="employee_tbl">
  <tr>
    <th>
      <b><span data-i18n-key="employee">Employee</span></b>
    </th>
  </tr>
  <tr>
    <td>
      <label>
        <i class="fas fa-plus-circle add_button"></i>
        <input type="text" name="employee" required/>
      </label>
    </td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>