如何用jQuery定位并移除HTML集合中被点击的元素？

嘿，这个问题我之前也踩过坑，核心是你搞混了jQuery对象和原生DOM元素数组的区别，我给你一步步拆解解决：

为什么会报错？ #

你用$('.className').get()获取的是原生DOM元素组成的普通数组，而index()是jQuery对象专属的方法——原生DOM元素本身并没有这个方法，所以调用el.index()才会抛出TypeError。

两种可行的解决方案 #

方案1：继续使用原生DOM数组管理 #

既然你已经拿到了原生DOM数组，直接用原生JS的数组方法就能定位并移除点击的元素：

// 获取原生DOM元素数组
let collection = $('.className').get();

// 给所有目标元素绑定点击事件
$('.className').on('click', function() {
  // 用indexOf找到当前点击元素在数组中的位置（this就是点击的原生DOM元素）
  const targetIndex = collection.indexOf(this);
  
  // 确保找到元素后再移除（避免重复点击的无效操作）
  if (targetIndex !== -1) {
    collection.splice(targetIndex, 1);
    console.log('移除后的集合：', collection);
  }
});

原理：数组中存储的是DOM元素的引用，indexOf(this)可以直接匹配到对应的元素位置，再用splice移除即可。

方案2：直接用jQuery对象管理（更符合jQuery风格） #

其实完全没必要转成原生数组，直接用jQuery对象来操作会更简洁：

// 保留jQuery对象（不要用get()转原生数组）
let $collection = $('.className');

$collection.on('click', function() {
  // 用jQuery的.not()方法排除当前点击的元素，返回新的jQuery集合
  $collection = $collection.not(this);
  console.log('移除后的jQuery集合：', $collection);
  
  // 如果后续需要原生数组，再调用get()：$collection.get()
});

原理：jQuery的.not()方法会创建一个新的jQuery对象，自动排除掉指定的元素，不需要手动找索引，代码更简洁。

补充：如果非要用index()怎么办？ #

如果你只是好奇怎么让之前的map代码运行，需要把原生DOM元素包装成jQuery对象再调用index()：

collection.map((el) => { console.log($(el).index()) });

不过这只是验证方法，实际移除元素的话，上面两种方案更高效。

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