Javascript 删除隐藏元素的属性以修复样式

我有一个页面，它有卡片，可以从JSON获取数据，问题是当我隐藏某个元素时，它会留下空白并破坏样式。我如何修复它？如果该元素有一个属性

display:none

它应该

remove（）

以下是它的一些照片： 当我点击class1时

类别2：

我的js：

$(document).ready(function () {
  $(function () {
    $.getJSON("links.json", function (data) {
      $.each(data, function (key) {
        $(".mdc-list").append(
          "<a class='mdc-list-item' href='#'><span class='mdc-list-item__ripple'></span><span class='mdc-list-item__text'>" +
            key +
            "</span></a>"
        );
      });
      $.each(data, function (key, value) {
        var keys = key;
        $.each(data[key], function (key, value) {
          //data-key...
          $(".card").append(
            "<div class='mdc-card'><a class='mdc-list-item' href=" +
              value.link +
              " data-key=" +
              keys +
              "><span class=''></span><span><img class='mdc-img' src=" +
              value.link +
              "></span><span  class='mdc-list-item__text'>" +
              value.name +
              "</span></a></div> "
          );
          $(".mdc-card .mdc-list-item").hide();
        });
      });
      //});

      //on click of a tag
      $(document).on("click", ".mdc-list-item", function () {
        //get key
        var key = $(this).find(".mdc-list-item__text").text().trim();
        console.log(key);
        $(".main").hide();
        $(".mdc-card .mdc-list-item").hide();
        if ($(".mdc-card .mdc-list-item").hasOwnProperty("display:none")) {
          $(".mdc-card .mdc-list-item").remove();
        }
        $(".mdc-card .mdc-list-item[data-key=" + key + "]").show();
      });
    });
  });
});

$（文档）.ready（函数（）{
$（函数（）{
$.getJSON（“links.json”，函数（数据）{
$。每个（数据、功能（键）{
$（“.mdc列表”）.append(
""
);
});
$。每个（数据、函数（键、值）{
var键=键；
$.each（数据[键]、函数（键、值）{
//数据键。。。
$（“.card”）。附加(
" "
);
$（“.mdc card.mdc列表项”）.hide（）；
});
});
//});
//单击标记时
$（文档）.on（“单击“，”.mdc列表项”），函数（）{
//拿到钥匙
var key=$（this.find（“.mdc-list-item_uutext”）.text（）.trim（）；
控制台日志（键）；
$（“.main”）.hide（）；
$（“.mdc card.mdc列表项”）.hide（）；
if（$（“.mdc card.mdc列表项”）.hasOwnProperty（“显示：无”））{
$（“.mdc card.mdc列表项”）.remove（）；
}
$（“.mdc card.mdc列表项[data key=“+key+”]）。show（）；
});
});
});
});

Html:

身体{
保证金：0；
}
.mdc顶部应用程序栏{
位置：相对位置；
背景色：#009688；
宽度：100%；
}
.卡片{
位置：绝对位置；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
弹性生长：5；
宽度：100%；
证明内容：周围的空间；
}
.mdc卡.mdc列表项{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.mdc卡{
位置：相对位置；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
最大宽度：260px；
边缘顶部：10px；
}
.mdc img{
宽度：260px；
保证金：0；
}
.主要照片{
显示器：flex；
证明内容：中心；
对齐项目：居中；
底部：0；
利润上限：200px；
}
梅因先生{
宽度：100%；
最大高度：100%；
底部：0；
}
链接
菜单
链接

topAppBar.setScrollTarget（document.getElementById（“滚动条”）；
topAppBar.listen（“MDCTopAppBar:nav”，（）=>{
drawer.open=！drawer.open；
});
您需要隐藏
mdc卡
而不是内部的链接，因为您将获得宽度为0的flex项，这将破坏布局

$（“.mdc卡”）.hide（）；
$（“.mdc card.mdc列表项[data key=“+key+”]）。最近（“.mdc card”）.show（）；

您需要更新以下内容：

$（“.card”）
.附加(
" "
)
.find（“.mdc卡”）
.hide（）；

或者更好：

var card_item=$（“”）。hide（）；
$（“.card”）。附加（卡片项）；

注:

if（$（“.mdc card.mdc列表项”）.hasOwnProperty（“显示：无”））{
$（“.mdc card.mdc列表项”）.remove（）；
}

这段代码毫无意义，它总是错误的，因为jQuery对象从来没有
display:none
属性。
我不知道你在问什么，但这段代码不正确
$（“.mdc card.mdc list item”）.hasOwnProperty（“display:none”）
method
hasOwnProperty
检查对象是否有字段或方法不测试jQuery对象是否有样式。要测试对象是否隐藏，需要使用
$（“.mdc card.mdc list item”）.is（“：visible”）
。此外，您选择的是所有项目，而不是单击的项目，要获取刚才单击的项目，您需要使用
mdc\u list\u item=$（此项）内部单击事件，在每个
循环中，您需要将项目保存在变量中以访问它，因为您隐藏的是所有项目，而不是刚刚创建的项目。我正在尝试添加
hide（）
它隐藏了元素，但留下了“打破我的风格”的空间，感谢您在@jcubichow发表评论。有可能做到这一点吗？我认为问题在于您没有隐藏
mdc卡
，而是
mdc列表项
，因此它们仍然是宽度为0的弹性项。你隐藏的是link而不是div。我确实尝试过这个解决方案，但仍然无法使用所有卡disappear@simao看到我的编辑，我忘了你最初隐藏了链接。非常感谢你，它工作得很好。
 <style>
      body {
        margin: 0;
      }
      .mdc-top-app-bar {
        position: relative;
        background-color: #009688;
        width: 100%;
      }
      .card {
        position: absolute;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-grow: 5;
        width: 100%;
        justify-content: space-around;
      }
      .mdc-card .mdc-list-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .mdc-card {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        max-width: 260px;
        margin-top: 10px;
      }
      .mdc-img {
        width: 260px;
        margin: 0;
      }
      .main-photo {
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
        margin-top: 200px;
      }
      .main {
        width: 100%;
        max-height: 100%;
        bottom: 0;
      }
    </style>

    <title>Links</title>
  </head>
  <body>
    <header class="mdc-top-app-bar">
      <div class="mdc-top-app-bar__row">
        <section
          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
        >
          <button
            id="btn"
            class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button"
            aria-label="Open navigation menu"
          >
            menu
          </button>
          <span class="mdc-top-app-bar__title">Links</span>
        </section>
      </div>
    </header>
    <div>
      <section id="drawer">
        <aside class="mdc-drawer mdc-drawer--modal">
          <div class="mdc-drawer__content">
            <h3>Links</h3>
            <nav class="mdc-list"></nav>
          </div>
        </aside>
        <div id="scrollbar" class="mdc-drawer-scrim"></div>
      </section>
    </div>
    <div class="card"></div>
    <div class="main-photo">
      <img class="main" src="" alt="" />
    </div>
    <script>
      const topAppBarElement = document.querySelector(".mdc-top-app-bar");
      const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);

      const drawer = mdc.drawer.MDCDrawer.attachTo(
        document.querySelector(".mdc-drawer")
      );

  topAppBar.setScrollTarget(document.getElementById("scrollbar"));
  topAppBar.listen("MDCTopAppBar:nav", () => {
    drawer.open = !drawer.open;
  });
</script>