我有这样的例子:

<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

最佳答案

如果您想要删除的所有跨度标签都有一个删除或添加的类,并且使用该类测试它们不会影响您的任何其他 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() 的数组,您可以对其进行迭代。

关于javascript - 删除 span - 标签并将内容保留在 <td> 父标签中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12578945/

10-12 12:57
查看更多