Process HTML in javascript

Question

I would like to remove all instances of a .class in an html.

remove class "s"

 remove <span class="s">some text</span> in html

Output

 remove some text in html

What's the easiest way to do this?

Answer 1

Using jQuery you could do:

$(".s").remove();

http://api.jquery.com/remove/

Answer 2

replaceNode?

http://www.webreference.com/js/column43/replace.html

Answer 3

Assuming you want to remove it from just this class. Here's how to keep just the text:

$(".s").each(function(){
  $(this).replaceWith($(this).text());
});

Code in action.

And if you want to keep the HTML:

$(".s").each(function(){
  $(this).replaceWith($(this).html());
});

And here's that code in action.

Answer 4

Here's a plain JavaScript solution. It might look a bit long at first sight, but it simply does what you want:

function moveElements(root) {
  var parent = root.parentNode,
      e = root.firstChild;
  while (e != null) {
    var next = e.nextSibling;
    parent.insertBefore(e, root);
    e = next;
  }
  parent.removeChild(root);
}

function removeClass(root, name) {
  var e = root.firstChild;
  while (e != null) {
    var next = e.nextSibling;
    if (e.nodeType == 1) { // element node
      if (e.className == name)
        moveElements(e);   // move children outside this element
      else
        removeClass(e, name);  // else recursively scan this element
    }
    e = next;
  }
}

removeClass recursively scans elements looking for the specified class, and if found, calls moveElements, which moves the children outside and removes the original element. To run it through the entire document, removing the class s (from your example), call it like this:

removeClass(document.documentElement, 's');

Here's a working example on JSBin.