[英]Trim white space from label without removing inside <input>
我的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>
您可以看到标签在数字的两边都有空格。 我的javascript只打算剪裁该空白,但同时也消除了整个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
和innerHTML
不能代替textContent
。 我究竟做错了什么?
textContent
, innerText
, innerHTML
,它们都将内容替换为您分配的任何值,因此将删除输入。
您应该做的是遍历子节点,仅过滤出文本节点,并仅修剪那些内容。
var labels = document.querySelectorAll("div.product-addon label"); for (var i = 0; i < labels.length; i++) { var children = labels[i].childNodes; for (var j = 0; j < children.length; j++) { if ( children[j].nodeType === 3 ) 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.