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

Question

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

Answer 1

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.

Answer 2

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();
  });
});

Answer 3

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