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


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


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

if (lastSegment === 'a') {


} else {




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


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


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..

    Autohide Scrollbars - Show only when necessary

    How to keep a floating div centered on window resize (jQuery/CSS)

    How to resize in
    with float:left?

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How to embed video on my first website

    How to apply a css class for jqGrid height property setGridHeight?

    How to use CSS to create a matrix of cells, and not use HTML tags at all

    Can't make any different fonts show up on website with @font-face or google fonts

    how to make multiple inline dropdown lists cross platform compatible?

    How to change dropdownlist width to 100% using CSS

    How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

    how to animate a text in javafx using css?

    jQueryUI tabs mouseover a disabled link, how do I change the cursor so it doesn't appear clickable?

    How to remove space above the

    how to center background image in window resize

    CSS: position: absolute together with margin: auto for centering - How does that work?

    If I use “getElementById” to alter a CSS style of a single object, how do I alter all elements that inherit the style?

    How to stop centering inside a table cell?

    How to load CSS on SSL pages?

    How to dynamically reload a .css?

    How does css inheritance work exactly?

    How to enable CSS editing in Intellij

    How to design a Sass animation library that allows users to modify variables?

    How to Find and replace class with javascript (No JQ)

    CSS: How to specify a min-width on a table?

    How to get resultant HTML after executing all scripts?

    How to change css content hover effect background color css php in this situation?

    CSS style not showing on print preview

    Developer Tools: How can I quickly check the difference in styles between normal state and :focus?

    How to have elements copy other element's auto height css?