Je crée une fonction d'ajout et de suppression dans jQuery lorsque minus btn [remove_button] cliquera. mais ça ne marche pas. J'ajoute le td quand plus btn [add_button] cela fonctionne mais comment j'obtiens la méthode de suppression.

Mon code est ci-dessous, je suis frais dans jQuery et j'espère que si je me trompe, vos amis développeurs aideront à résoudre le problème.

var maxField = 5;
var x = 1;
$('.add_button').click(function() {
  if (x < maxField) {
    x++;
    newrow = '<tr class="ok"><td><select class="form-control" name="product_name[]" id="product_id" required><option value="14563">Product 1</option><option value="96547">Product 2</option><option value="965489">Product 3</option></select></td><td><input type="tel" class="form-control" name="quantity[]" placeholder="Enter Quantity" /></td><td><button type="button" class="btn btn-danger remove_button"><i class="fa fa-minus"></i></button></td></tr>';
    var rowspan = parseInt($('.field_data').attr('rowspan')) + 1;
    $('.field_data').attr('rowspan', rowspan);
    $('.complaint_table tr:eq(3)').after(newrow);
  }
});

$(".complaint_table").on("click", ".remove_button", function(e) {
  e.preventDefault();
  $(this.tr).remove();
  x--;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

<table class="table table-striped table-hover table-bordered complaint_table">
  <tbody>
    <tr>
      <td>Company:</td>
      <td>
        <input class="form-control" type="text" maxlength="50" placeholder="Company" />
      </td>
      <td>Company RegDate:</td>
      <td>
        <input class="form-control" type="date" />
      </td>
    </tr>
    <tr class="complaint_table">
      <td rowspan="10" class="field_data">Products<span style="color: red; font-size: 14px;"> *</span>:</td>
      <td>
        <select class="form-control" name="product_name[]">
          <option value="14563">Product 1</option>
          <option value="96547">Product 2</option>
          <option value="965489">Product 3</option>
        </select>
      </td>
      <td><input class="form-control" type="number" maxlength="2" minlength="1" name="quantity[]" /></td>
      <td><button type="button" class="btn btn-success add_button"><i class="fa fa-plus"></i></button></td>
    </tr>
3
John Cart 16 oct. 2020 à 12:14

1 réponse

Meilleure réponse

Le problème est dû au fait que this dans le gestionnaire de clics .remove_button fait référence à l'élément DOM. Ils n'ont pas de propriété tr.

Au lieu de cela, pour obtenir une référence à l'élément parent tr du bouton cliqué, utilisez closest() :

$(".complaint_table").on("click", ".remove_button", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  x--;
});
3
Rory McCrossan 16 oct. 2020 à 09:19