3

我有例如这个：

<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

4

3 回答 3

3

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

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

分解：

  • $('.added')= 选择具有类的元素added。
  • .contents()= 抓取选定元素内的文本。
  • .unwrap()= 展开文本，删除<span>和</span>标记，同时将内容保持在完全相同的位置。
于 2019-04-04T19:36:51.970 回答
2

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

希望这可以帮助

编辑

在这里尝试了解如何使用getElementsByClassName()可能简化此代码的函数来实现此代码。getElementsByTagName()它返回一个可以迭代的数组。

于 2012-09-25T08:32:46.530 回答
-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>
于 2012-09-25T09:15:05.263 回答