CODEWITHSUNDEEP
javascripthtmljqueryhtml-tableappend
John Cart
John Cart

Reputation: 69

remove table tr when click btn jquery

I am creating a add and remove function in jQuery when minus btn [remove_button] will click. but it not working. I am appending the td when which plus btn [add_button] it works but how I achieve for deletion method.

My code is below, I am fresh in jQuery and hoping if I am wrong you buddy developers will help to fix the issue.

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>

Upvotes: 3

Views: 41

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because this in the .remove_button click handler refers to the DOM element. They do not have a tr property.

Instead to get a reference to the parent tr element to the clicked button use closest():

$(".complaint_table").on("click", ".remove_button", function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
  x--;
});

Upvotes: 3

Related Questions