How to remove string that dosn't have an html

Question

I need to remove strings that do not have an html tag.

For example :

<div class="A">
  <a href="#" class="link">keep this</a> and i want to remove this 
</div>

Can I do this using only css ?

Answer 1

Set the style inside of class "A" to be blank by default. Set up a secondary class to handle ".A a". This will allow you to have two different styles. One for anchored, one for not.

.A { color: rgba(0, 0, 0, 0.5); }  //Set this to transparent
.A a { color: #000 }

Something like that.

Answer 2

You could use visibility:

.A {
  visibility: hidden;
}
.A a {
  visibility: visible;
}

<div class="A">
  <a href="#" class="link">keep this</a> and i want to remove this 
</div>

NOTE - of course this DOES NOT remove the string / element in question from the DOM itself, it merely hides it but achieves the same purpose.

Answer 3

You can also use display: none with the :not() pseudo-selector

.A :not(a) {
    display: none;
}

EDIT: This does not work

Neither does this:

.A {
    display:none
}

.A a {
    display: inline!important;
}

Answer 4

Maybe you can use font-size ::

.A {
  font-size: 0;
}
.A a {
  font-size: 20px;
}

<div class="A">
  <a href="#" class="link">keep this</a> and i want to remove this
</div>

Answer 5

You can not do this with pure css. If you cannot change the markup, then you will need to use JS to grab the content you want to keep and remove the rest.

If you have any control over the markup you should really consider using different markup. You could have an alternate element that is initially hidden.

<div class="A">
    <a href="#" class="link">keep this</a> and i want to remove this
</div>
<div class="A hidden">
    <a href="#" class="link">keep this</a>
</div>

you could also enclose the other content you want to remove in a span tag and give it a class that you can reference later.

<div class="A">
    <a href="#" class="link">keep this</a> <span class="bad-stuff">and i want to remove this</span>
</div>