CODEWITHSUNDEEP
htmlcss
Wesley
Wesley

Reputation: 1237

How to delete a <div> element where only unique identifier is html text with no tags

My previous question was closed because it supposed that this would answer my question. However, it does not, because it's not really what I'm asking. I'm not looking just to remove just the HTML text Received, but the whole row the 0 <3 Received. Simply using display: none; would do. My issue though is that in CSS I can't figure out what selector to use, as it seems the only thing that differentiates between elements in that list is the HTML text in the center, like "Received," or "Given," and that HTML text can't be accessed with CSS since it's not a valid selector. So what do I do?

Note that I need a purely CSS solution, if possible. The html is at the mobile page of mathbymiles.com/u.

enter image description here

Here is the relevant HTML:

<div id="ember69" class="user-stat ember-view"><span class="value">
    <span class="number">0</span>
</span>
<span class="label">
  <svg class="fa d-icon d-icon-heart svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#heart"></use></svg>
  Received
</span>
</div>

Upvotes: 0

Views: 73

Answers (2)

Ortophius
Ortophius

Reputation: 184

If you can not use any identifiers like classes or ids, you can rely on DOM structure pattern. Just try this:

.user-info + .user-stat {
  display: none;
}

enter image description here

Upvotes: 1

Laczk&#243; &#214;rs
Laczk&#243; &#214;rs

Reputation: 1118

Try either

.number, .label{ 
      display: none; 
}

To remove the content of the row, or try

#ember69{ 
   display: none 
}

To remove the whole row.

Upvotes: 0

Related Questions