更改.text（）内容并保留子页面html

Question

您能否告诉我如何从此span标记中删除字符@而不更改所有子html？

$('button').click(function() { 
 
    // ... 
 
});

#name { 
 
    background-color: #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
 
    <span id="name"> 
 
    <a href="#">Harry</a> 
 
    </span> 
 
    
 
    says: Hello @<span id="name"> 
 
    <a href="#">Hermione</a> 
 
    </span> 
 
</span><br /> 
 

 
<button>Remove</button>

我的想法：获取父.text()，分裂性格@，覆盖父文本（parent.text('')），并追加2份父。但是这种方式有一个很大的问题：所有的子html都不会被保留。

Answer 1

我已向外部<span>添加了一个ID，并对您的名称ID进行了重复数据删除。

$('button').click(function() { 
 

 
    $('#outer').html($('#outer').html().replace(/@/,'')); 
 
    
 
});

#name { 
 
    background-color: #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id='outer'><span id="name"><a href="#">Harry</a></span> says: Hello @<span id="name2"><a href="#">Hermione</a></span></span> 
 

 
<br /> 
 

 
<button>Remove</button>

Answer 2

首先你应该改变id属性类的重复，或者完全删除它们。

要解决您的实际问题，您可以遍历顶级span中保存的节点，并删除出现在任何textNode值中的任何@字符。试试这个：

$('button').click(function() { 
 
    $('body > span').contents().each(function() { 
 
    if (this.nodeType == 3) { 
 
     this.nodeValue = this.nodeValue.replace('@', ''); 
 
    } 
 
    }); 
 
});

#name { 
 
    background-color: #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
 
    <span class="name"> 
 
    <a href="#">Harry</a> 
 
    </span> says: Hello @<span class="name"> 
 
    <a href="#">Hermione</a> 
 
    </span> 
 
</span> 
 
<br /> 
 

 
<button>Remove</button>