Remove form field javascript

Question

I have a form where I have a table with an employee and every time I click on plus a new row for employee is added but when I click the remove field the script add a new row till the maximum. So what I want is the "-" icon to remove the field added.

This is what I came up with so far ...

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

Why are you removing divs when you're actually dealing with table rows? You have zero divs in your layout. Should probably be `...closest('tr').remove()`. — isherwood, Feb 03 '22 at 19:14
Does this answer your question? [What is the best way to remove a table row with jQuery?](https://stackoverflow.com/questions/170997/what-is-the-best-way-to-remove-a-table-row-with-jquery) — isherwood, Feb 03 '22 at 19:21

score 2 · Accepted Answer · answered Feb 03 '22 at 19:18

You're removing parent('div') while there is no one. Use closest('tr') instead.

Also, you had classes add_button and remove_button on wrong elements.
And id should be unique in 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>

@AlexManea, please look at Peter Seliger's answer as it provides more detailed review of your code. — Kosh, Feb 03 '22 at 19:43

Peter Seliger · Answer 2 · 2022-02-03T21:35:43.590

First of all the OP needs to sanitize the HTML structure.

What is currently used is too complex and constantly at risk of becoming invalid markup due to how the label-control relationship gets handled. The "label for="<id>"" management is not needed especially since with this kind of structure one always is in danger of providing identical id values.

Thus the first change provides a generic id agnostic structure ...

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

... changes to ...

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

... and for all removable rows to ...

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

Looking into the above two code blocks one also might notice the class-name changes of 'add_button' and 'remove_button' to where both really belong to ... each to its iconized add/remove element.

Thus, the only necessary JavaScript/jQuery code change needs to take place within the remove handler. Since the OP already takes advantage of event delegation, one just has to access the event object's target reference. From there one queries the closest </tr> element which then gets removed.

Prove ...

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

Remove form field javascript

2 Answers2