使用jQuery执行remove删除元素时not属性过滤失效如何解决？

问题原因 #

• this指向不符合预期。你代码中$(this).data('source')如果上下文的this不是你要取属性的目标元素，取到的值会是undefined，构造出的过滤条件[data-source="undefined"]没有匹配元素，导致所有元素都被判定为要删除的对象。
• 选择器拼接存在转义风险。如果data-source的属性值包含引号、特殊字符，直接拼接字符串会导致选择器语法错误，过滤条件直接失效。
• 旧版本jQuery的兼容问题。部分低版本jQuery对:not选择器内的属性选择器解析存在bug，会导致过滤规则不生效。

解决方法 #

先确认属性取值正确 #

先加一行日志打印要保留的属性值，确认取值符合预期：

console.log('待匹配的data-source值：', $(this).data('source'));

如果输出为undefined，说明this指向错误，需要将this替换为你实际要取属性的元素选择器。

使用更稳妥的过滤写法 #

不要直接拼接字符串构造选择器，改用.not()回调函数的写法，完全规避转义和语法问题：

// 先把要保留的属性值存到变量里，避免this指向变化
const keepSource = $(this).data('source');
$(".glarry-" + activegallery + " .product-gallery .thumbnails .thumbnail").not(function() {
  // 回调返回true的元素会被排除在删除队列外
  return $(this).data('source') === keepSource;
}).remove();

兜底方案：手动遍历判断 #

如果还是存在异常，改用each遍历手动判断删除，逻辑更清晰可控：

const keepSource = $(this).data('source');
$(".glarry-" + activegallery + " .product-gallery .thumbnails .thumbnail").each(function() {
  if ($(this).data('source') !== keepSource) {
    $(this).remove();
  }
});

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