Javascript 如何从HTMLDOM中完全隐藏div？

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

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

目标：当我在站点/a时，我想用class

b

隐藏

div

反之亦然

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

我试过了

JS

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

if (lastSegment === 'a') {

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

} else {

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

} 

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

CSS

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

if (lastSegment === 'a') {

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

} else {

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

} 

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

HTML

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

//逻辑
//逻辑

结果

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

---

如果您对此有任何帮助/提示/建议，我们将不胜感激。

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

完全使用Javascript添加/删除div。不要两者都渲染

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

if（lastSegment==“a”）{
$（“.target”）.append（'linka'）；
} 
否则{
$（“.target”）.append（'Link B'）；
}

使用阴影DOM-阴影DOM元素在inspect元素中不可见，除非将某些设置深埋在设置图标中

教程： 谢谢你可以试试这个

if (lastSegment === 'a') {

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

} else {

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


} 

在这里：

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

jQuery正在这样做

.detach（）方法与.remove（）相同，只是.detach（）方法 保留与删除的元素关联的所有jQuery数据。这 方法在将删除的元素重新插入到中时非常有用 DOM在以后的时间

---

如果您已经在使用jQuery，那么使用

$（.a）.hide（）

，而不是手动操作类和css可能是最简单的方法。如果您不想在DOM中使用div，那么为什么要在标记中使用它？是否在加载文档后运行js？@Amit:我希望能够根据URL隐藏/显示它们。我真的不明白您的答案。你能告诉我更多关于“完全使用Javascript添加/删除div。不要同时呈现两者”的信息吗？我完全不知道你的第二个div了。谢谢你的编辑。我喜欢你建议的

append

想法。：）真的，我们能做到吗。如果能成功那就太棒了。该死，老兄，你救了我的命。这是工作！！确认！！。所以你建议，我应该在url的基础上添加class

hidden

，对吧。这会从DOM中删除吗？不会，这不会删除表单DOM。需要使用.remove（）方法将其删除