如何在不同媒体查询下移除元素，去除wrapper类div实现响应式布局？

解决方案 #

方案1：纯CSS适配（最推荐，无需操作DOM） #

你完全不需要真的移除.wrapper节点，只要通过媒体查询修改.wrapper的布局规则，就能实现和删除wrapper完全一致的视觉效果，原DOM结构不用做任何改动：

/* 大屏幕默认样式：图文并排 */
.wrapper {
  display: flex;
  gap: 20px; /* 可自定义图文间距 */
  align-items: flex-start; /* 可根据需求调整对齐方式 */
}

/* 小屏幕样式：堆叠展示，此时wrapper的样式等效于无样式普通div */
@media (max-width: 768px) { /* 断点可根据业务需求调整 */
  .wrapper {
    display: block; /* 取消flex并排规则，子元素自动垂直堆叠 */
    /* 如果原本给wrapper加了padding、border等小屏不需要的样式，这里统一重置即可 */
    padding: 0;
    margin: 0;
    border: none;
  }
}

方案2：JS动态操作DOM（仅在必须修改DOM结构的特殊场景使用） #

如果确实有业务要求必须移除外层wrapper节点，可以通过JS监听媒体查询状态来动态增删节点：

const mediaQuery = window.matchMedia('(max-width: 768px)')
let wrapper = document.querySelector('.wrapper')
let wrapperChildNodes = null

function handleLayoutChange(e) {
  if (e.matches) {
    // 小屏状态：移除wrapper，将子节点移到父层级
    if (wrapper && wrapper.parentNode) {
      wrapperChildNodes = [...wrapper.children]
      const parent = wrapper.parentNode
      while (wrapper.firstChild) {
        parent.insertBefore(wrapper.firstChild, wrapper)
      }
      wrapper.remove()
    }
  } else {
    // 大屏状态：恢复wrapper结构
    if (wrapperChildNodes && !document.querySelector('.wrapper')) {
      const parent = wrapperChildNodes[0].parentNode
      const newWrapper = document.createElement('div')
      newWrapper.className = 'wrapper'
      parent.insertBefore(newWrapper, wrapperChildNodes[0])
      wrapperChildNodes.forEach(child => newWrapper.appendChild(child))
      wrapper = newWrapper
    }
  }
}

// 初始化执行 + 监听视口尺寸变化
handleLayoutChange(mediaQuery)
mediaQuery.addEventListener('change', handleLayoutChange)

注意：该方案会修改页面DOM结构，可能影响子元素的事件绑定、其他CSS选择器的匹配逻辑，非必要不推荐使用。

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