Garniture espace blanc de l'étiquette sans enlever l'intérieur <input>

Question

Mon html:

<div class="product-addon product-addon-extra-tip"> 
    <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0"> 
     <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2"> 2 </label> 
    </p> 
    <p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1"> 
     <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5"> 5 </label> 
    </p> 
</div> 

Vous pouvez voir l'étiquette contient des espaces de chaque côté du nombre. Mon javascript est destiné à couper uniquement cet espace, mais il élimine également l'étiquette input.

var labels = document.querySelectorAll("div.product-addon label"); 
for (var i = 0; i < labels.length; i++) { 
    labels[i].textContent = labels[i].textContent.trim(); 
} 

innerText et innerHTML ne fonctionnent pas à la place de textContent. Qu'est-ce que je fais mal?

Answer 1

textContent, innerText, innerHTML, ils remplacent tous le contenu à la valeur que vous lui attribuez, de sorte que les entrées sont supprimées.

Ce que vous devez faire, c'est d'itérer sur les nœuds enfants, de filtrer uniquement les nœuds de texte et de limiter le contenu de ceux-ci uniquement.

var labels = document.querySelectorAll("div.product-addon label"); 
 
for (var i = 0; i < labels.length; i++) { 
 
    var children = labels[i].childNodes; 
 
\t 
 
    for (var j = 0; j < children.length; j++) { 
 
    \t if (children[j].nodeType === 3) 
 
     \t children[j].nodeValue = children[j].nodeValue.trim(); 
 
    } 
 
}

<div class="product-addon product-addon-extra-tip"> 
 
    <p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0"> 
 
     <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2"> 2 </label> 
 
    </p> 
 
    <p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1"> 
 
     <label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5"> 5 </label> 
 
    </p> 
 
</div>