求助：实现窗口宽度>800px时无需刷新移除指定div

你的问题核心在于当前代码只在页面加载完成时执行了一次判断，窗口大小改变时没有重新触发这个逻辑。下面给你几个可行的解决方案：

方案1：监听窗口resize事件并添加防抖 #

直接绑定resize事件可以让代码在窗口大小变化时重新执行，但要注意resize事件会频繁触发（比如拖动窗口边框时），所以需要加个防抖函数来减少不必要的执行次数，提升性能：

// 防抖函数，避免resize频繁触发
function debounce(func, delay = 200) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 封装判断逻辑为单独函数
function handleMenuVisibility() {
  const $menu = $('.menu');
  if ($(window).width() > 800) {
    $menu.remove(); // 如果你确定不需要再恢复这个元素，用remove没问题
    // 如果你之后可能需要在窗口变小时恢复菜单，建议用hide()代替：
    // $menu.hide();
  } else {
    // 如果用了hide()，这里可以加$menu.show(); 来恢复显示
  }
}

// 页面加载时先执行一次
$(document).ready(function() {
  handleMenuVisibility();
  // 绑定防抖后的resize事件
  $(window).on('resize', debounce(handleMenuVisibility));
});

方案2：结合CSS媒体查询（更高效） #

如果你的需求只是基于窗口宽度显示/隐藏.menu，其实用CSS媒体查询可能比JS更高效，不需要依赖jQuery：

/* 默认显示菜单 */
.menu {
  /* 你的原有样式 */
}

/* 当窗口宽度大于800px时隐藏菜单 */
@media (min-width: 801px) {
  .menu {
    display: none;
  }
}

这种方式的好处是浏览器原生支持，性能更好，而且不需要处理JS的事件监听。如果之后需要用JS控制额外逻辑，再结合上面的JS方案即可。

关于event.preventDefault()的说明 #

你提到的event.preventDefault()确实主要用于阻止浏览器的默认行为（比如链接跳转、表单提交），和这个窗口resize触发的问题没有关系，所以不用在这个场景里考虑它。

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