Is it possible to change only text in label (no other elements)?

Question

I want to remove the text from the following label (highlighted with *), however I want to keep all other text content of the label elements descendants in tact and unaffected. How can I achieve this?

Here is a sample of my HTML:

<label class="has-checkbox terms">
    <input name="order[terms]" type="hidden" value="0">
    <div class="icheckbox_minimal" style="position: relative;">
        <input class="checkbox" type="checkbox" value="1" name="order[terms]" id="order_terms">
        <ins class="iCheck-helper"></ins>
    </div>
    *ich habe die*
    <a href="#">AGBs</a>
    *gelesen und stimme diesen zu.* 
    <span class="terms-error"></span>
</label>

@MaxGrünfeld you want to remove `*ich habe die*` and `*gelesen und stimme diesen zu.*` from the `label` while leaving the rest of HTML in there, like [this](https://jsfiddle.net/1xndbkpc/)? If so it is a duplicate of the other question I linked. If not you might want to elaborate on your question — empiric, May 13 '19 at 09:07

Dacre Denny · Accepted Answer · 2019-05-13T09:11:38.333

If I understand correctly, you want to remove the text that is directly contained in your <label> element, without affecting the text of other descendant elements of the label.

This can be achieved without jQuery by iterating the childNodes of your <label> element and clearing the textContent of each text node as shown:

const label = document.querySelector('label');

/* Iterate the nodes of the label */
for(const node of label.childNodes) {

  /* Clear the text content of each child node 
  that is a text node */
  if(node.nodeName === '#text') {
    node.textContent = '';
  } 
}

<label class="has-checkbox terms">
    <input name="order[terms]" type="hidden" value="0">
    <div class="icheckbox_minimal" style="position: relative;">
        <input class="checkbox" type="checkbox" value="1" name="order[terms]" id="order_terms">
        <ins class="iCheck-helper"></ins>
    </div>
    *ich habe die*
    <a href="#">AGBs</a>
    *gelesen und stimme diesen zu.* 
    <span class="terms-error"></span>
</label>

Is it possible to change only text in label (no other elements)?

1 Answers1