删除跨度 - 标签，并保持内容的父标签

我有例如这样的：删除跨度 - 标签，并保持内容的父标签

<td "class=name"> 
    <span class="removed">one</span> 
    <span class="added">two</span> 
</td>

或本：

<td class=name> one 
    <span class="removed">two</span> 
    <span class="added">three</span> 
</td>

或本：

<div> 
    one 
    <span class="added">two</span> 
    three four 
    <span class="removed">five</span> 
    six 
</div>

和想用JavaScript（没有JQuery）来改变它：

<td "class=name"> 
    two 
</td>

或本：

<td class=name> 
    one 
    three 
</td>

或本：

<div> 
    one 
    two 
    three 
    four 
    six 
</div>

不能弄明白。并只发现了很多jQuery的东西，如replaceWith等，但需要纯粹的JavaScript为它

来源

2012-09-25 kfc1991

http://stackoverflow.com/a/12562101/459897 –

如果所有你想要删除的span标签有一个删除或添加类，并使用该类测试它们'不会影响你的任何其他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]); 
    } 
}

否则，你需要找到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]); 
}

希望这有助于

编辑

尝试here对于如何实现用getElementsByClassName()功能可能简化这个这个代码的想法。它返回一个数组，如getElementsByTagName()你可以迭代。

来源

2012-09-25 08:32:46

向你表示感谢。所以这是我如何删除标签的方式。但是如果class =“added”，我需要在这个位置上的span文本的内容。（如使用div标签的示例） – kfc1991

@MartinWaldherr请参阅我修正的答案。只需测试添加的类，然后获取span标签的innerHTML并将其添加到父容器，即DIV或TD元素。 –

使用jQuery ...或任何其他框架，为您处理跨浏览器的东西。不要重新发明轮子。使用getElementsByTagName只是为了规避IE缺乏类支持是一种不好的方法。你至少可以为自己写getbyclassname，参见：http://stackoverflow.com/q/7410949/851604 – bldoron

-2

可以消除任何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>

来源

2012-09-25 09:15:05

删除跨度 - 标签，并保持内容的​​父标签

回答

相关问题

删除跨度 - 标签，并保持内容的父标签