修剪标签上的空白区域,而不删除<输入>内部
Trim white space from label without removing inside <input>
My 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>
相关文章:
- React 15使用空字符串删除输入值
- 删除输入中输入的符号
- 使用jquery删除输入框上的外部处理程序/库
- 附加和删除输入值的一部分
- 根据下拉选择向表单添加和删除输入标记
- 尝试擦除时删除输入中的零
- 当按键不匹配时删除输入字符
- AngularJS自定义过滤器调用了两次,并在第二次调用时删除输入数据
- 检测用户是否没有't输入任何内容/删除输入jQuery
- React.js引导添加或删除输入字段
- 删除输入jquery中的值时清除所有更改
- 类似开关的按钮可以创建和删除输入框
- 按下“Enter”键时删除输入框中的文本
- 输入时,正在删除输入框文本
- 如何删除输入类型文本
- 从打印预览中删除输入框
- 在表单中添加/删除输入
- 删除输入的最后一个值
- 修剪标签上的空白区域,而不删除<输入>内部
- JQuery 验证代码不允许删除输入的文本