How to remove text from a Tag

Question

If an element has class active I want to remove only text from the tag. I tried it with $(selector).remove(selector) but a problem is I need selector to remove something...

<li class="active">
    <a href="profil-anzeigenverwaltung.php">
        <i class="fas fa-briefcase"></i>
        Anzeigenverwaltung
    </a>
</li>
<li>
    <a href="profil-anzeige-erstellen.php">
        <i class="fas fa-align-center"></i>
         Anzeige erstellen
    </a>
</li>
<li>
    <a href="profil-refrenzen.php">
        <i class="fas fa-anchor"></i>
         Referenzen
    </a>
</li>

Do you want to remove the text and leave the icon? Are you planning on re-adding the text if the element loses the class "active"? Kindly be more specific with your question. Also see if [Remove text from html node with jQuery/Javascript](https://stackoverflow.com/q/20003351/215552) answers your question. — Heretic Monkey, Nov 16 '20 at 12:56

score 1 · Answer 1 · answered Nov 16 '20 at 12:01

You can do it with CSS only:

.active a span {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="active">
  <a href="profil-anzeigenverwaltung.php">
    <i class="fas fa-briefcase"></i> <span>Anzeigenverwaltung</span>
  </a>
</li>
<li>
  <a href="profil-anzeige-erstellen.php">
    <i class="fas fa-align-center"></i> <span>Anzeige erstellen</span>
  </a>
</li>
<li>
  <a href="profil-refrenzen.php">
    <i class="fas fa-anchor"></i> <span>Referenzen</span>
  </a>
</li>

Hope that's what you need. ;)

sativay · Answer 2 · 2020-11-16T12:43:08.707

The jQuery answer to remove text from within the desired tag is set the innerHTML value to the empty string. This may be accomplished in more than one way but here is one:

$('li.active a span').html('');

As Anna_B said you can (and in most cases probably should) do it with CSS. The CSS may also be implemented differently, but in sticking with jQuery you could toggle classes, one class having the text visible and the other not.

What you must consider with CSS is the method of hiding elements affects the document flow. Discussion about this on SO.

e.g. display:none removes the element from the flow whereas visibility:hidden does not. The latter has unintended affects unless you are aware of and desire these aforementioned flow dynamics.

Regarding the hiding of text with jQuery here is a discussion and answers.

score 0 · Answer 3 · answered Nov 16 '20 at 16:00

0

simply with js

document.querySelector("li.active a").innerText=''

answered Nov 16 '20 at 16:00

XMehdi01

5,538
2
10
34

How to remove text from a Tag

3 Answers3