I have 2 divs in my page, each div have class a , b. I also have 2 urls

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

Goal : I want to hide div with class b when I'm at site/a and vice of versa.

The goal is to hide them pletely from the DOM. I'm not sure how to do that.

I've tried

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>

Result

I can see both of the div when I do inspect element.

Any helps / hints / suggestions on this will be much appreciated

I have 2 divs in my page, each div have class a , b. I also have 2 urls

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

Goal : I want to hide div with class b when I'm at site/a and vice of versa.

The goal is to hide them pletely from the DOM. I'm not sure how to do that.

I've tried

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>

Result

I can see both of the div when I do inspect element.

Any helps / hints / suggestions on this will be much appreciated

• javascript
• jquery
• html
• css

• 1 if you're already using jQuery it's probably easiest to just use $(.a).hide(), and not manipulate classes and css manually. – doldt Commented Jul 18, 2015 at 21:20
• 5 If you don't want the div in the DOM, then why do you have it in the markup? – Amit Commented Jul 18, 2015 at 21:20
• 1 do you run the js after document load? – Ori Price Commented Jul 18, 2015 at 21:20
• @Amit : I want to be able to hide/show them base on the URL. – code-8 Commented Jul 18, 2015 at 21:22
• 1 api.jquery./detach – rafaelcastrocouto Commented Jul 18, 2015 at 21:24

4 Answers 4

jQuery's .detach() is doing this.

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

Here:

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

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

You can use remove() function to remove it pletely.

You cannot get rid on the DOM by adding and removing classes. There are multiple ways you can tackle this .

1. Add/Remove divs using Javascript pletely. Don't render both.

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

2. Use Shadow DOM - ShadowDom elements are not visible with inspect element, unless making some settings buried deep inside setting icons.

Tutorial : http://www.html5rocks./en/tutorials/webponents/shadowdom/ Thanks

you can try this

if (lastSegment === 'a') {

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

} else {

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


}