循环删除子元素，却只删除了最后一个？

Question

我用的zepto，一开始，采用如下代码：let parent = $('.parent'),  child = parent.find('.child');for (let i = 0; i < 5; i++) {  child.eq(-1).remove();}我的本意是希望删除最后五个子元素，但实际却只删除了最后一个。我知道，可以通过如下代码删除：let parent = $('.parent');for (let i = 0; i < 5; i++) {  parent.find('.child').eq(-1).remove();}这段代码。应该是每次循环，每次去查询dom，所以依次删了最后五个。但我的疑问是，为何第一段代码不行？第一段里的 child 不会去查询dom结构吗？

Answer 1

注意 $.fn.remove() 和 Array.prototype.pop() 是不一样的，后者是直接对数据进行操作，前者是从 DOM 树删除 DOM 元素（但元素仍然存在于内存，由 jQuery 对象/数组引用）

对于你这个问题，其实我建议先通过 .filter() 把需要的元素过滤出来，再一次性 remove()：

const parent = $(".parent");

const children = parent.find(".child");

const firstIndexForRemoving = children.length - 5;

children.filter(i => i >= firstIndexForRemoving).remove();

顺便提一下

我这个答案不是解决你的问题，只是锦上添花，喜欢请赞，但不太适合采纳

对于不会再改变的变量，建议使用 const 声明而不是 let 声明

尽量不要在声明变量的时候使用逗号运算符一次声明多个变量（压缩工具会自动处理成这种结果，但自己写代码不要这么写），尤其是对变量立即初始化的时候

child 在原程序中表示若干子项，应该使用复数 children 更为准确