点击按钮时用jQuery删除表格行失效问题排查

嘿，我一眼就瞅出问题所在啦——你违反了HTML的ID唯一性规则！你给<tr>和对应的<button>设置了完全相同的ID，这直接导致jQuery选择器出现混乱。

当你执行$('#' + btn_id).remove()时，浏览器会优先匹配页面中第一个拥有该ID的元素，也就是你点击的那个按钮本身，所以你其实是在删除按钮，而非它所在的表格行，这就是为啥看起来行没被删掉的原因😅。

给你两种修复方案，第二种更简洁实用：

方案1：给按钮ID加前缀，避免冲突 #

修改HTML里的按钮ID，给它加个前缀比如btn-，这样就不会和行的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="btn-<?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").replace('btn-', '');
      $('#' + btn_id).remove();
  });
});

方案2：利用DOM关系直接删除行（推荐） #

其实完全不需要依赖ID，我们可以通过按钮的父级关系找到它所在的表格行，这种方式更简洁，也彻底避免了ID冲突的问题：
修改后的HTML（按钮的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" class="btn btn-danger button_remove">X</button></td>
</tr>

对应的jQuery代码：

$(document).ready(function() {
  $('.button_remove').click(function() {
      // closest()会找到当前元素最近的父级<tr>元素
      $(this).closest('tr').remove();
  });
});

这个方案的好处是，不管以后你的按钮周围加了多少层嵌套元素，closest('tr')都能准确找到它所在的表格行，代码鲁棒性更强。

内容的提问来源于stack exchange，提问作者Arslan