如何完全從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");


}