Bootstrap 可见性 类 有效但内容未从标记中删除

Question

我在我的网页上使用 bootstrap 可见性 类，如下所示：

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

可见性 类 起作用并在需要时隐藏在视口中。但是，当我在浏览器的开发人员工具中查看标记时，我仍然看到隐藏的 divs 的标记。例如，在大屏幕上，“lrg-div-B”不会出现在视口中，但标记仍会出现在 HTML 选项卡中。无论如何也可以从标记中删除它，类似于 'dispaly: none' 所做的？

Answer 1

display: none 不会将其从标记中删除，但会从文档流中将其删除，因此它不会占用 space。您可以使用 remove() 或 removeChild() 删除带有 javascript 的节点，但请注意您无法再次取回它（除非您存储它并稍后 re-append 它）。

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>

Answer 2

不应该从标记中删除元素。 CSS 处理 DOM 的外观而不是其结构。如果你真的想删除 DOM 元素，你需要使用一点 Javascript。