按钮点击

Question

我点击按钮时没有删除表格行 tr id 而按钮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

id如果要在jQuery中使用它们，则每个元素必须是唯一的，并且您的代码无效（由tr和td共享id）的值。

通过closest()

简化您的代码

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

注意： - 从id和tr两者中删除td。因为根本不需要它。它将使您的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>