Remove form field javascript-CodePudding

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 ></i></label><input type="text" name="employee"  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 ></i></label>
      <input type="text" name="employee"   id="employee" required/>
    </td>
  </tr>
</table>

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

CodePudding user response：

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

CodePudding user response：

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 ></i></label>
    <input type="text" name="employee"   id="employee" required/>
  </td>
</tr>

... changes to ...

<tr>
  <td>
    <label>
      <i ></i>
      <input type="text" name="employee" required/>
    </label>
  </td>
</tr>

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

<tr>
  <td>
    <label>
      <i ></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 ></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 ></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>