首页 > 解决方案 > 摆脱 DOM 中的 div

问题描述

我在处理媒体查询时遇到了一些问题。当屏幕宽度小于 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>

标签: javascripthtmlcssvue.js

解决方案


尝试这个:

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

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

    }
});

推荐阅读