为什么jQuery无法检测到<i>标签的点击事件？

1. 核心逻辑错误：DOM查找方向错误 #

你编写的jQuery代码中$(this).find('.btn_container').remove()逻辑完全错误：

• this指向触发点击事件的.close_cart元素，find()方法的作用是查找当前元素的后代子元素，但.btn_container是.close_cart的祖父级元素，不可能在子级范围内被找到，因此代码执行后没有生效效果，同时jQuery选择器未匹配到元素时也不会抛出报错，符合你看到的控制台无异常的表现。
• 正确写法为使用closest()方法向上查找最近的祖先级元素，修改后的JS代码如下：

$('.close_cart').click(function(e) {
  e.preventDefault();
  $(this).closest('.btn_container').remove();
});

2. 样式问题导致元素无点击热区 #

你提到的<i>标签无宽高问题确实会影响点击触发：

• <i>标签默认是行内（inline）元素，仅设置width、height不会生效，需要先修改它的display属性；同时你的:before伪元素使用了绝对定位，需要给.close_cart设置position: relative让伪元素相对于宿主元素定位，避免点击位置和元素实际位置不匹配。
  修改后的CSS代码如下：

.btn_container .btn_cart .close_cart {
  opacity: 0.8;
  cursor: pointer;
  margin-left: 1rem;
  /* 新增样式 */
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
}

.btn_container .btn_cart .close_cart:before {
  content: "";
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://www.gravatar.com/avatar/43730af340cb0a2cc17396e3001a86ac?s=256&d=identicon&r=PG&f=1);
  position: absolute;
  /* 调整为相对父元素定位的坐标 */
  top: 0;
  right: 0;
  transition: all 0.3s ease;
}

3. 可选优化：事件委托避免动态元素绑定失效 #

如果你的.close_cart元素是页面加载完成后动态生成的，直接绑定点击事件会出现元素未渲染导致绑定失效的问题，可以改成事件委托形式绑定到页面稳定根节点：

$(document).on('click', '.close_cart', function(e) {
  e.preventDefault();
  $(this).closest('.btn_container').remove();
});

内容的提问来源于stack exchange，提问作者Bernat Pinós