How can I hide a div completely from HTML DOM?


Tags: javascript,jquery,html,css

Problem :

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

  • www.site.com/a
  • www.site.com/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 completely 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



Solution :

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.


    CSS Howto..

    How to give all divs same amount of space on each side

    How do I select an element in the dom with an attribute of ct:value?

    How to have multiple CSS transitions on an element?

    How to align a list to an image, and jquery problems

    How to hook up CSS search bar to JavaScript or another server side language

    How can that view be achieved? Collage / Magazine Products

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

    CSS causing red frame around lightbox image - how to remove?

    How to set background-size to “cover”, plus a little more in CSS?

    CSS puzzle: How to add background-image and set height/width on empty span?

    How do you transition a height without the element going outside the parents border?

    How can I center a tooltip below an element that is narrower than the tooltip?

    How to save game information PHP/HTML/CSS/JS [closed]

    How to add new CSS rule to inner id

    How can I put styleName (css) on ui.xml to HTML5 input element (range)

    How do I change CSS submenu width so it doesn't used the same width as the main menu?

    CSS or Jquery how to position image in the middle of an li element?

    How to stop the navigation bar after scrolling?

    How to reverse a jQuery animation back to original CSS properties

    How can I give an image a black opaque overlay?

    How to displaying and hiding again the div after clicking a button

    How not to mess up styling when using css frameworks

    How to override xhtml theme css?

    how to copy font-family from a webpage

    onsen ui 2 : how to implement android style scrollable tabbar?

    How to use pure css selector to select hidden element

    How to use this CSS rule for divs? [JSFiddle]

    How to implement a drag and swap effect in CSS and JS [closed]

    How can I improve this mobile site? [closed]

    How to hardware accelerate a box-shadow animation in CSS?