jQuery使用closest方法按class查找元素不生效问题求助

问题原因 #

• 选择器使用错误：$("#package_id")是ID选择器，但你的HTML中<tr>设置的是class="package_id"，不存在ID为package_id的元素，第一步获取的元素就为空。
• closest()方法的作用是向上查找当前元素的祖先节点，而.p_id是<tr>的子节点（后代元素），用closest()不可能匹配到该元素。

修复方案 #

修改你的JS代码如下，先定位到当前点击按钮对应的行，再查找该行下的.p_id元素取值即可：

$(".remove-from-cart").click(function(e) {
  e.preventDefault();
  // 先获取当前点击按钮所在的tr行，再查找行内的.p_id元素
  var package_id = $(this).closest('.package_id').find('.p_id').val();
  console.log(package_id);
});

可选优化（非必须） #

你当前把<input type="hidden" class="p_id">直接放在<tr>标签下不符合HTML表格规范，<tr>的直接子元素只能是<td>或者<th>，建议把这个隐藏输入框放到任意一个<td>标签内，避免后续出现兼容问题。

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