Question

我在处理媒体查询时遇到了一些问题。当屏幕宽度小于 768px 时，某些内容应该会消失。确实如此。显示器上没有内容，但如果我查看 DOM，内容仍然存在。

我是如何试图摆脱这种情况的：

@media screen and (max-width: 768px) {
  .left {
    display: none;
  }
}

我认为应该是这样： JS 代码应该解析当前的显示分辨率，如果它达到 768px 的宽度，则删除内容。

我不确定我的想法是否正确。你能解释一下（甚至显示代码）如何删除这些内容。

这是 html 模板：

<template>
        <div class="left">
            <div class="container">
                <div class="left__row" v-if="ListSearch.length">
                    <LeftSideItem
                        v-for="item in ListSearch"
                        v-bind:item="item"
                        v-on:delete-item="deleteItem"
                    />
                </div>
              <div class="left__empty" v-else>
                <p >No search history</p>
              </div>
            </div>
        </div>
</template>

Answer 1

试试这个：

$(document).ready(function() {
    if ($(window).width() < 768) {

        $('.left').remove();

    }
});

摆脱 DOM 中的 div

1 个答案: