Come rimuovere una stringa che non ha un tag html con i CSS

Question

Ho bisogno di rimuovere le stringhe che non hanno un tag html.

Ad esempio:

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

Posso fare questo utilizzando solo i CSS?

Answer 1

forse è possibile utilizzare 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 2

impostare lo stile interno di classe "A" per essere vuoto per impostazione predefinita. Imposta una classe secondaria per gestire ".A a". Questo ti permetterà di avere due stili diversi. Uno per ancorati, uno per non.

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

Qualcosa del genere.

Answer 3

Si potrebbe utilizzare 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>

NOTA - naturalmente questo non rimuovere la stringa/elemento in questione dal DOM sé, semplicemente lo nasconde, ma ottiene lo stesso scopo .

Answer 4

Non è possibile farlo con puro css. Se non è possibile modificare il markup, sarà necessario utilizzare JS per afferrare il contenuto che si desidera conservare e rimuovere il resto.

Se si dispone di un controllo sulla marcatura, è consigliabile prendere in considerazione l'utilizzo di marcature diverse. Potresti avere un elemento alternativo inizialmente nascosto.

<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> 

si potrebbe anche racchiudere l'altro contenuto che si desidera rimuovere in un tag span e dargli una classe che è possibile fare riferimento in seguito.

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

Answer 5

È inoltre possibile utilizzare display: none con il :not() pseudo-selettore

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

EDIT: Questo non funziona

Né fa questo:

.A { 
    display:none 
} 

.A a { 
    display: inline!important; 
}