时间戳

首页 > 解决方案 > 仅使用 html 和 css 删除 DIV

html - 仅使用 html 和 css 删除 DIV

问题描述

<div class="abc"></div>

如果 div 标签之间没有任何内容，我需要删除这个 div，这意味着当 div 为空时。

我正在像这样接近CSS

div.abc:empty{display:none;}

但是如果我使用这种方法，我会遇到一个问题。如果 div 之间有一个空格，like<div> </div> :empty不起作用。

div.abc { border: 1px solid red; height:50px; }
div.abc:empty{display:none;}
<div class="abc"></div>
<hr/>
<div class="abc"> </div>

标签： htmlcss

解决方案

截至 2021 年 11 月，没有 JavaScript 是不可能的。CSS 中没有修剪（但在FireFox中除外）

请注意，此示例还将隐藏具有伪类内容的 div

document.querySelectorAll(".abc")
  .forEach(div => div.hidden = div.textContent.trim() === "")
  
  // alternative if you want to use a class:
  // div.classList.toggle("hide",div.textContent.trim() === "")
div.abc { border: 1px solid red; height:50px; }
div.pscontent:after { content: "Also will be hidden"}
div.abc:empty{display:none;}
<div class="abc"></div>
<hr/>
<div class="abc"> </div>
<hr/>
<div class="abc pscontent"></div>

要处理伪类内容，我们可以这样做：

const hideEmpty = (sel, testPseudoContent) => {
  const elems = document.querySelectorAll(sel)
  elems.forEach((elem,i) => {
    const text = [elem.textContent.trim()]
    if (testPseudoContent) {
      ["before", "after"].forEach(ps => text.push(window.getComputedStyle(elem, ps).getPropertyValue("content").trim()))
    }
    elem.hidden = text.join('').length === 0;
  })
};

hideEmpty('.abc')
hideEmpty('.def.pscontent', true)
div.abc {
  border: 1px solid red;
  height: 50px;
}

div.def {
  border: 1px solid green;
  height: 50px;
}

div.pscontent:after {
  content: "Don't hide this"
}
<div id="div1" class="abc"></div>
<hr/>
<div id="div2" class="abc"> </div>
<hr/>
<div id="div5" class="def pscontent"></div>

推荐阅读