如何在JavaScript中动态重构可见/隐藏项的无序列表？

你现在的问题出在hide()方法上——它只是把不匹配的<li>设为不可见，但这些元素仍然留在DOM结构里，所以<ul>的高度还是保留了原始列表的尺寸，才会出现空白区域。要实现你要的效果，换个思路：每次搜索时，清空当前列表，只把匹配的项重新添加进去即可。

具体步骤： #

1. 保存原始列表备份：页面加载完成后，先把所有<li>复制一份存起来，方便后续恢复原始状态。
2. 处理搜索逻辑：点击搜索按钮时，先清空当前的<ul>，再根据搜索内容筛选匹配项，把它们添加回<ul>里；如果搜索框为空，就恢复原始列表。

代码示例： #

// 页面加载完成后执行
$(document).ready(function() {
  // 保存原始的所有列表项（克隆一份，避免修改原元素）
  const originalItems = $('ul li').clone();
  
  // 绑定搜索按钮的点击事件（替换成你实际的按钮选择器，比如#searchBtn）
  $('#searchBtn').click(function() {
    const searchKeyword = $('#searchInput').val().trim(); // 获取搜索框内容（替换成你的输入框选择器）
    const $targetUl = $('ul'); // 目标列表
    
    // 先清空当前列表
    $targetUl.empty();
    
    // 如果搜索关键词为空，恢复原始列表
    if (searchKeyword === '') {
      $targetUl.append(originalItems.clone());
      return;
    }
    
    // 遍历原始列表，筛选匹配的项并添加到列表中
    originalItems.each(function() {
      const itemText = $(this).text().trim();
      // 判断当前项是否包含搜索关键词（这里用includes，也可以用正则实现更复杂的匹配）
      if (itemText.includes(searchKeyword)) {
        $targetUl.append($(this).clone());
      }
    });
  });
});

补充说明： #

• 如果你需要更精准的匹配（比如大小写不敏感、模糊匹配），可以把includes换成正则表达式，比如：

  const regex = new RegExp(searchKeyword, 'i'); // 'i'表示忽略大小写
  if (regex.test(itemText)) {
    // 匹配逻辑
  }
  

• 如果你给<li>绑定了点击事件或其他交互，clone()方法默认不会复制事件，这时候可以用clone(true)来连同事件一起克隆。

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