不删除隐藏元素时如何解决DOM长度不变导致的列表边框样式异常问题

可行解决方案 #

• 方案1：添加隐藏标记类配合CSS :has() 选择器实现纯CSS控制
  搜索隐藏元素时，不要仅设置display: none，额外给隐藏元素追加is-hidden类名，可见元素无该标记。CSS通过:not()过滤隐藏元素后计数匹配样式：

/* 可见元素默认带下边框 */
.brands__list-item:not(.is-hidden) {
  @apply lg:border-b border-gray-200;
}

/* 最后一行不足5个的可见元素取消下边框 */
.brands__list-item:not(.is-hidden):nth-child(5n+1):has(~ .brands__list-item:not(.is-hidden):nth-child(-n+4)),
.brands__list-item:not(.is-hidden):nth-child(5n+1):has(~ .brands__list-item:not(.is-hidden):nth-child(-n+4)) ~ .brands__list-item:not(.is-hidden) {
  @apply lg:border-b-0;
}

• 方案2：JS动态计算可见元素状态（兼容性最优）
  每次搜索触发元素显隐、列表初始化时，调用JS方法统计当前可见元素，给最后一行不足5个的元素追加专属类名控制边框：

function adjustBrandBorder() {
  // 筛选所有可见的列表项
  const visibleItems = Array.from(document.querySelectorAll('.brands__list-item')).filter(el => el.offsetParent !== null);
  const totalVisible = visibleItems.length;
  // 先清空所有元素的最后一行标记类
  visibleItems.forEach(el => el.classList.remove('brands__list-item--last-row'));
  // 计算最后一行起始下标，不足5个的全部标记
  const lastRowStartIdx = Math.floor(totalVisible / 5) * 5;
  visibleItems.slice(lastRowStartIdx).forEach(el => el.classList.add('brands__list-item--last-row'));
}

补充对应CSS规则：

.brands__list-item--last-row {
  @apply lg:border-b-0;
}

• 方案3：调整布局用Grid自动适配边框规则
  把列表容器改为Grid布局，固定每行5列，通过容器和子元素的边框配合实现自动忽略最后一行下边框，不受隐藏元素影响：

.brands__list {
  @apply grid lg:grid-cols-5 gap-4 border-t border-gray-200;
}
.brands__list-item {
  @apply border-b border-gray-200 py-2;
  &.is-hidden {
    display: none;
  }
}

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