Question

我有例如：

<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呢

Answer 1

如果你要删除的所有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()的数组，您可以迭代它。

Answer 2

这是最好，最简单的方法，只需要一行代码并使用jQuery：

$('.added').contents().unwrap();

故障：

$('.added') =选择具有added类的元素。
.contents() =抓取所选元素内的文本。
.unwrap() =解开文本，删除<span>和</span>标签，同时将内容保持在完全相同的位置。

Answer 3

您可以使用以下代码删除任何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>

删除span - 标记并将内容保留在父标记中

3 个答案: