Bootstrap visibility classes working but content not removed from markup

Question

I am using bootstrap visibility classes as follows on my webpage:

<div class="hidden-sm">
   <div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
   <div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
   <div id="lrg-div-C"></div>
</div>

The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?

Answer 1

display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).

console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node:  <div class="hidden-sm">…</div>

console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove():  <div id="lrg-div-B">large B</div>

document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B')); 
// Removed node:  null

.hidden-sm {
  display: none;
}

<div class="hidden-sm"> <!-- hidden but still in markup -->
   <div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
   <div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
   <div id="lrg-div-C">large C</div>
</div>