I need to remove strings that do not have an html
tag.
For example :
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;
}
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.
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>
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.
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>