刪除表行不適用於單擊按鈕時的jQuery

Question

我在單擊按鈕時沒有問題，表格行未刪除tr id和button id都是相同的值。 請告訴我我做錯了

<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代碼

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

提前致謝

Answer 1

如果要在jQuery使用id ，則每個元素的id必須唯一，並且會導致代碼無法正常工作（因為tr和td共享id值相同）。

通過closest（）簡化代碼

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

注意：-分別從tr和td刪除id 。 因為根本不需要。 這將使您的HTML結構正確，整潔。

Answer 2

那是因為您為tr和button使用了相同的ID ....嘗試在此處使用data-attributes

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

然后像這樣使用jQuery

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