javascript 删除 span - 标签并将内容保留在 <td> 父标签中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12578945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove span - tags and keep the content in an <td> parent tag
提问by kfc1991
i have for example this:
例如，我有这个：
<td "class=name">
<span class="removed">one</span>
<span class="added">two</span>
</td>
or this:
或这个：
<td class=name> one
<span class="removed">two</span>
<span class="added">three</span>
</td>
or this:
或这个：
<div>
one
<span class="added">two</span>
three four
<span class="removed">five</span>
six
</div>
and want to change it with JavaScript (without JQuery) to this:
并希望使用 JavaScript（不带 JQuery）将其更改为：
<td "class=name">
two
</td>
or this:
或这个：
<td class=name>
one
three
</td>
or this:
或这个：
<div>
one
two
three
four
six
</div>
can't figure it out. and only found a lot of jquery stuff like replaceWith and so on, but need pure javascript for it
想不通。只找到了很多jquery的东西，比如replaceWith等等，但是需要纯javascript
采纳答案by Mark Walters
If all the span tags you have that you want removing have a class of removed or added and testing them using the class doesn't affect any of your other html you could try this.
如果您想要删除的所有跨度标签都有一个已删除或添加的类，并且使用该类测试它们不会影响您的任何其他 html，您可以试试这个。
var spans = document.getElementsByTagName("span");
for(var i=0; i<spans.length;i++)
{
if(spans[i].className == "added")
{
var container = spans[i].parentNode;
var text = spans[i].innerHTML;
container.innerHTML += text;
container.removeChild(spans[i]);
}
else if(spans[i].className == "removed")
{
var container = spans[i].parentNode;
container.removeChild(spans[i]);
}
}
Otherwise you need to find a way by ID or class name perhaps to grab the container of the span tags and do something similar. For instance like this
否则，您需要通过 ID 或类名找到一种方法来获取 span 标签的容器并执行类似的操作。例如像这样
var myDiv = document.getElementById("myDiv");
var spans = myDiv.getElementsByTagName("span");
for(var i=0; i<spans.length;i++)
{
if(spans[i].className == "added")
{
var text = spans[i].innerHTML;
}
myDiv.innerHTML += text;
myDiv.removeChild(spans[i]);
}
Hope this helps
希望这可以帮助
EDIT
编辑
Try herefor an idea of how to implement this code using a getElementsByClassName()function which might simplify this. It returns an array like getElementsByTagName()does which you can iterate over.
在此处尝试了解如何使用getElementsByClassName()可能简化此代码的函数来实现此代码。它返回一个类似于 do 的数组getElementsByTagName()，您可以对其进行迭代。
回答by Peacock
Here is the best and easiest method that only requires one line of code and uses jQuery:
这是最好和最简单的方法，只需要一行代码并使用 jQuery：
$('.added').contents().unwrap();
Breakdown:
分解：
$('.added')= Selects the element with theaddedclass..contents()= Grabs the text inside the selected element..unwrap()= Unwraps the text removing the<span>and</span>tags while keeping the content in the exact same location.
$('.added')= 选择具有added类的元素。.contents()= 抓取所选元素内的文本。.unwrap()= 解开文本，删除<span>和</span>标签，同时将内容保持在完全相同的位置。
回答by Panthera Razork
You can remove any html class with the following code:
您可以使用以下代码删除任何 html 类：
<div id="target_div">one<span class="added">two</span>three four<span class="removed">five</span>six</div>
<script type="text/javascript">
function remove_html_tag(tag,target_div){
var content=document.getElementById(target_div).innerHTML;
var foundat=content.indexOf("<"+tag,foundat);
while (foundat>-1){
f2=content.indexOf(">",foundat);
if (f2>-1) {content=content.substr(0,foundat)+content.substr(f2+1,content.length);}
f2=content.indexOf("</"+tag+">",foundat);
if (f2>-1){content=content.substr(0,f2)+content.substr(f2+3+tag.length,content.length);}
foundat=content.indexOf("<"+tag,foundat);
}document.getElementById(target_div).innerHTML=content;}
</script>
<a href="javascript:remove_html_tag('span','target_div')">Remove span tag</a>
