如何从HTML DOM完全隐藏div？

问题描述：

我在我的页面有2个div，每个div都有class a，b。我也有2个网址如何从HTML DOM完全隐藏div？

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

目标：我想隐藏div与b上课的时候我在现场/ a ，反之亦然。

目标是将它们完全从DOM中隐藏起来。我不知道该怎么做。

我已经试过

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当我做检查的元素。

任何帮助/提示/在此建议，将通过多添加和删除类的赞赏

如果您已经在使用jQuery，则最简单的方法就是使用$（.a）.hide（），而不是手动操作类和css。 – doldt

如果您不想在DOM中使用div，那么您为什么要在标记中使用它？ – Amit

你是否在文件加载后运行js？ –

答

jQuery的.detach()正在这样做。

的.detach（）方法是一样的一个.remove（），不同之处在于.detach（）保持与移除的元件相关联的所有的jQuery的数据。此方法在稍后将已移除的元素重新插入到 DOM中时非常有用。

答

你不能摆脱对DOM。有多种方法可以解决这个问题。

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

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

用暗影DOM - ShadowDom元件未被检查元素，除非使埋藏在内心深处的设置图标一些设置可见。

教程：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 感谢

我真的不明白你的答案。你能告诉我更多关于这个“完全使用Javascript添加/删除div，不要同时渲染”。？ – ihue

你的第二个完全失去了我。 – ihue

我编辑了答案..谢谢 –

答

你可以试试这个

if (lastSegment === 'a') { 

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

} else { 

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


}

所以你建议，我应该添加'隐藏'类，因为我去的基础上的网址，正确的。 – ihue

这会从DOM中移除吗？ – ihue

不，这不会删除表单DOM。需要使用.remove（）方法将其删除 – abs

答

这里：

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

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

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

真的，我们可以做到这一点。如果它有效，那将会很棒。 – ihue

该死的，伙计，你救了我的命。这是工作！确认!! – ihue

如何从HTML DOM完全隐藏div？

相关推荐