Question

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

Answer 1

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.