CODEWITHSUNDEEP
phpjqueryhtml
Arslan
Arslan

Reputation: 433

Delete a table row is not working with jquery on button click

I have problem when I click on button the table row is not deleted tr id and button id are both same value. please tell where I am doing wrong

<tr id="<?php echo $result->id;?>">

  <td><input type="text" name="feature[]" class="text-input medium-input datepickur" value="<?php echo $result->feature;?>" /></td>

  <td><button type="button" name="remove" id="<?php echo $result->id;?>" class="btn btn-danger button_remove">X</button></td>

</tr>

Jquery code

$(document).ready(function() {
  $('.button_remove').click(function() {
      var btn_id = $(this).attr("id");
      $('#' + btn_id + '').remove();
  });
});

Thanks in advance

Upvotes: 0

Views: 80

Answers (3)

Saw Zin Min Tun
Saw Zin Min Tun

Reputation: 642

$(document).ready(function() {
  $('.button_remove').click(function() {
    $(this).parents().eq(1).remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td><input type="text" value="1"/></td>
  <td><button type="button" class="button_remove">X</button></td>
</tr>
<tr>
  <td><input type="text" value="2"/></td>
  <td><button type="button" class="button_remove">X</button></td>
</tr>
</table>

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

id need to be unique per element if you are going to use them in jQuery, and hense your code is not working (As tr and td sharing same value for id).

Simplify you code through closest()

$(document).ready(function(){ 
  $('.button_remove').click(function(){ 
      $(this).closest('tr').remove();
  });
});

Note:- Remove id from tr and td both. As it's not needed at all. It will make your HTML structure correct and cleaner.

Upvotes: 3

Bhuwan
Bhuwan

Reputation: 16855

Thats because you are using same id for tr and button....Try to use data-attributes here

<tr id="<?php echo $result->id;?>">
  <td><input type="text" name="feature[]" class="text-input medium-input datepickur" value="<?php echo $result->feature;?>" /></td>
  <td><button type="button" name="remove" data-row="<?php echo $result->id;?>" class="btn btn-danger button_remove">X</button></td>
<tr>

And then use jQuery like this

$(document).ready(function() {
  $('.button_remove').click(function() {
    var btn_id = $(this).data("row");
    $('#' + btn_id + '').remove();
  });
});

Upvotes: 0

Related Questions