从字符串中间移除一个字符：不移除内部元素

Question

这个让我难过。我想从label 元素中删除“+”。这是 HTML：

 <label class="option" for="edit-attributes-21-33">
 <input type="radio" id="edit-attributes-21-33" name="attributes[21]" 
 value="33" checked="checked" class="form-radio"> 4 oz, +$15.00</label>

我从这个开始

$(".option").each(function(index, value) {

$(this).text( $(this).text().replace("+", ""));

})

这会删除“+”，但也会删除输入元素。于是我尝试了：

$(".option").each(function(index, value) {

var oldString = $(this).html();
var newString = oldString.replace("+", "");
console.log(oldString, newString);
$(this).text(newString);

})

这会生成一个正确的 html 标记字符串，但它是一个字符串，并且会以这种方式传递回 DOM。我看到另一个帖子有同样的问题，但没有解决方案。

Answer 1

您要查找的内容称为 textNode。我为您的标签提供了一个 ID 以使其更容易，但其他选择器的原则保持不变：

var node = document.getElementById("example").childNodes[2];
node.nodeValue = node.nodeValue.replace("+", "");

With a simple demo.
您应该尽可能多地使用纯 JS，以支持 jQuery。 Plain JS 通常比 jQuery 快很多。

评论后，if you don't know the exact position of the textnode, check this。

Answer 2

迟到的答案，只是为了展示使用 jQuery 的不同方法。

在这里，您将保持input 状态，并且不会冒替换您不想替换的字符的风险。假设您在其他地方使用了+，而不仅仅是在label 文本上。

$(function () {
    $('label.option').each(function () {
        var label = $(this);
        var input = $('input.form-radio', this);
        var text = label.text();

        // Clean up the label contents.
        label.empty();        

        // Replace the char occurrences.
        text = text.replace(/\+/g, "");

        // Append both the input and the modified text.
        label.append(input).append(text);        
    });
});

Demo

Answer 3

你可以通过使用.html()而不是.text()来实现你想要的代码：

$(".option").each(function(index, value) {
    var oldString = $(this).html();
    var newString = oldString.replace("+", "");
    console.log(oldString, newString);
    $(this).html(newString);
});

这是 JQuery .html() 方法参考：https://api.jquery.com/html/

这是小提琴：https://jsfiddle.net/Darkseal/1c572Luw/

我还稍微修改了您的 <input> 结束标记，使其符合 XHTML。