How to turn off display of div

Question

I am trying to delete the empty gray bracket in the picture. I have tried tag:empty and display: none but it is not working for me.

.tag:empty {
   display: none;
}

.tag {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #eee;
    border-bottom-width: 3px;
    border-radius: 5px;
    border: 1px solid grey;
    color: #666;
    display: inline-block;
    font-size: 10px;
    padding: 3px 12px;
}

templates: {
    empty: '<div id="empty">No startup companies have been found for {{ query }}.</div><br>',
    item: `
        <a href="{{linkUrl}}">
          <div class="container">
            <div class="item1">
                <img src="{{logoUrl}}" alt="{{hits-image}}" id="hits-image">
            </div>
            <div class="item2" id="title">
                {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
            </div>
            <div class="item3">
                <div id="location">
                    {{#_isLocation}}{{#helpers.highlight}}{ "attribute": "location" }{{/helpers.highlight}}{{/_isLocation}}
                </div>
                <div class="tag">
                    {{tagList}}
                </div>
            </div>
        </div></a>
      `,
    },
}),

Please advise, thank you very much.

Answer 1

The div element with class tag is not empty: in the pictured code it contains a space, and in the template code it contains white space around the Mustache (?) replacement brackets. Per MDN documentation ,

The:empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace).

A quick console log confirms the presence of child nodes:

 console.log(mt.firstChild.nodeType == Node.TEXT_NODE)

 <div class="tag" id="mt"> </div>

You should be able to use the :empty pseudo class by ensuring there is no white space within tag class elements, either by moving start and end tags together, using HTML comments around any white space in source (line feeds etc.), or setting elements' content to the empty string:

 .tag { width: 50px; height: 30px; background-color: cyan; }.tag:empty { display: none; }

 Empty <code>div.tag</code> (no child nodes) ➡️<div class="tag"></div>⬅️ <p></p> Non empty <code>div.tag</code> (contains white space) ➡️<div class="tag"> </div>⬅️

As already answered, including a period before tag in the CSS rule for .tag:empty is also required for syntax purposes.