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

I need to delete this div if there is nothing in between the div tags means when div is empty.

I am approaching in CSS like this

`div.abc:empty{display:none;}

But I have one problem if I use this method. If there is a single space between div, like <div> </div> :empty doesn't work.

div.abc { border: 1px solid red; height:50px; }
div.abc:empty{display:none;}

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

As of November 2021 impossible without JavaScript. There is no trim in CSS (yet except in FireFox

Note this example will also hide divs that have pseudo class content

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

To handle pseudo class content we can do this:

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your code does work but in the near future because the Specification has changed to make :empty consider white spaces

Note: In Level 2 and Level 3 of Selectors, :empty did not match elements that contained only white space. This was changed so that that—given white space is largely collapsible in HTML and is therefore used for source code formatting, and especially because elements with omitted end tags are likely to absorb such white space into their DOM text contents—elements which authors perceive of as empty can be selected by this selector, as they expect. ^ref

Until then, there is a Firefox solution using -moz-only-whitespace

div.abc { border: 1px solid red; height:50px; }
div.abc:-moz-only-whitespace {display:none;}
div.abc:empty {display:none;}

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

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>