如何完全从HTML DOM中隐藏div？

Question

我的页面上有2个div，每个div都有a，b类。 我也有2个网址

• www.site.com/a
• www.site.com/b

目标 ：当我在站点/ b时，我想隐藏b类的div ，反之亦然。

目的是将它们完全隐藏在DOM中。 我不确定该怎么做。

我试过了

JS

var lastSegment = location.pathname.split('/').pop();

if (lastSegment === 'a') {

    $(".a").removeClass("hidden");

} else {

    $(".b").removeClass("hidden");

} 

的CSS

.hidden {
  display: none!important;
  visibility: hidden!important;
}

的HTML

<div class="a hidden"> // Logic </div>
<div class="b hidden"> // Logic </div>

结果

当我检查元素时，我可以看到两个div。

任何帮助/提示/建议对此将不胜感激

Answer 1

jQuery的.detach（）正在执行此操作。

.detach（）方法与.remove（）相同，除了.detach（）保留与已删除元素关联的所有jQuery数据。 当稍后将删除的元素重新插入DOM时，此方法很有用。

Answer 2

这里：

   var lastSegment = location.pathname.split('/').pop();

    if (lastSegment === 'a') {
        $(".b").remove();
    } else {
        $(".a").remove();
    }

您可以使用remove（）函数将其完全删除。

Answer 3

您不能通过添加和删除类来摆脱DOM。 有多种方法可以解决此问题。

1. 完全使用Javascript添加/删除div。 不要同时渲染两者。

    if(lastSegment === "a") { $(".target").append('<div class="a">Link A</div>'); } else { $(".target").append('<div class="a">Link B</div>'); } 

2. 使用Shadow DOM-ShadowDom元素对于inspect元素不可见，除非进行一些设置深埋在设置图标中。

教程： http : //www.html5rocks.com/zh-CN/tutorials/webcomponents/shadowdom/谢谢

Answer 4

你可以试试这个

if (lastSegment === 'a') {

    $(".a").removeClass("hidden");
    $(".b").addClass("hidden");

} else {

    $(".a").addClass("hidden");
    $(".b").removeClass("hidden");


}