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:

<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

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:

<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

• javascript
• tags

• stackoverflow./a/12562101/459897 – Dr.Molle Commented Sep 25, 2012 at 8:31

3 Answers 3

Here is the best and easiest method that only requires one line of code and uses jQuery:

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

Breakdown:

• $('.added') = Selects the element with the added class.
• .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.

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.

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

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 here for 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.

You can remove any html class with the following code:

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