У меня есть форма, в которой у меня есть таблица с сотрудником, и каждый раз, когда я нажимаю плюс, добавляется новая строка для сотрудника, но когда я нажимаю поле удаления, сценарий добавляет новую строку до максимума. Итак, я хочу, чтобы значок «-» удалил добавленное поле.

Это то, что я придумал до сих пор...

$(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>
1
Alex Manea 3 Фев 2022 в 21:49
1
Почему вы удаляете div, когда на самом деле имеете дело со строками таблицы? У вас нет div в вашем макете. Вероятно, должно быть ...closest('tr').remove().
 – 
isherwood
3 Фев 2022 в 22:14
 – 
isherwood
3 Фев 2022 в 22:21

2 ответа

Лучший ответ

Вы удаляете 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>
2
Kosh 3 Фев 2022 в 22:18
Спасибо, теперь работает и понял свою ошибку: D
 – 
Alex Manea
3 Фев 2022 в 22:35
1
@AlexManea, посмотрите ответ Питера Селигера, так как он содержит более подробный обзор вашего кода.
 – 
Kosh
3 Фев 2022 в 22:43

Прежде всего, 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 уже использует делегирование событий, нужно просто получить доступ к ссылке target объекта event. Оттуда запрашивает ближайший элемент </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>
2
Peter Seliger 4 Фев 2022 в 00:35