jQuery实现href无值时移除父元素的代码问题排查

目标需求 #

匹配指定容器内的a标签，若a标签的href属性为无效值，则移除该a标签对应的父级div元素。

原代码错误点 #

• filter回调函数中的this是原生DOM节点，无法直接调用jQuery的attr()方法，运行会报类型错误，必须先用$()将其包装为jQuery对象才能调用jQuery提供的方法
• 无效值判断逻辑不全：仅判断href长度为0，无法覆盖href属性不存在、href值为#、href为javascript:void(0)这类假跳转的无效场景
• 最后执行remove()时删除的是筛选出的a标签本身，和需求要求的「删除父级div」目标不符

修正后代码 #

$("#cs-gallery .et_pb_module_inner .dnext_thumbs_gallery_top_holder .dnext-thumbs-gallery-top .dnext-thumbs-gallery-active .dnxte_thumbs_gallery_child .dnext-thumbs-gallery-item a").filter(function () {
    const href = $(this).attr('href')?.trim() ?? '';
    // 无效href判定规则可根据自身业务调整
    return !href || href === '#' || href.startsWith('javascript:');
})
// 向上查找最近的父级div，若父级是固定类名的元素，可传入对应选择器精确定位，比如.closest('.dnext-thumbs-gallery-item')
.closest('div')
.remove();

提示：如果需要保留带有效跳转链接的a标签对应的模块，只删空链接的模块，上述代码可以直接运行；如果你的无效href还有其他规则（比如跳转到固定的404地址），直接在filter的判断条件里补充即可。

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