移除href为空的子元素父元素时出现$(...).filter不是函数错误的解决方法

需求回顾 #

当class为dnext-thumbs-gallery-top-image-link的<a>元素href属性为空时，移除该元素的父级的父级元素。

错误原因分析 #

$(...).filter is not a function报错的核心原因是：你调用filter方法的对象不是有效的jQuery集合，常见场景包括：

• 用原生JS方法（如document.querySelector/querySelectorAll）获取元素后，直接在NodeList/DOM元素上调用jQuery的filter方法（原生对象没有该方法）。
• 选择器拼写错误，导致获取到的是未定义的对象或空的原生元素，而非jQuery包装后的集合。

正确实现代码 #

假设你的HTML结构如下 #

<div class="gallery-item"> <!-- 要移除的父级的父级 -->
  <div class="image-wrap"> <!-- 父级 -->
    <a href="" class="dnext-thumbs-gallery-top-image-link">空链接</a>
  </div>
</div>
<div class="gallery-item">
  <div class="image-wrap">
    <a href="https://example.com/photo.jpg" class="dnext-thumbs-gallery-top-image-link">有效链接</a>
  </div>
</div>

正确jQuery代码 #

// 1. 获取所有目标a标签的jQuery集合
$('.dnext-thumbs-gallery-top-image-link')
  // 2. 过滤出href为空或空白字符串的元素
  .filter(function() {
    const href = $(this).attr('href');
    return !href || href.trim() === '';
  })
  // 3. 遍历符合条件的元素，移除其父级的父级
  .each(function() {
    // 推荐用closest()代替parent().parent()，结构变化时更健壮
    $(this).closest('.gallery-item').remove();
    // 如果确定层级固定，也可以用：
    // $(this).parent().parent().remove();
  });

排查与修复步骤 #

1. 确认选择器有效性：在浏览器控制台输入$('.dnext-thumbs-gallery-top-image-link')，检查返回的是否是jQuery.fn.init(...)格式的集合，而非undefined或原生DOM元素。
2. 避免原生与jQuery混用：如果必须用原生方法获取元素，需先转为jQuery对象再调用方法：

   // 错误写法：直接在NodeList上调用filter
   // document.querySelectorAll('.dnext-thumbs-gallery-top-image-link').filter(...)
   
   // 正确写法：转为jQuery对象
   $(document.querySelectorAll('.dnext-thumbs-gallery-top-image-link')).filter(function() {
     // ...逻辑
   });
   

3. 检查jQuery加载状态：确保代码在jQuery加载完成后执行（比如放在$(document).ready()中，或页面底部），否则$未定义也会引发类似错误。

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