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?

I think he's asking how to conditionally strip HTML from text. — mwilcox
– mwilcox, Commented Jul 17, 2010 at 16:24

Gert Grenander · Accepted Answer · 2010-07-17 16:36:23Z

2

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.

answered Jul 17, 2010 at 16:36

Gert Grenander

17.1k6 gold badges42 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

casablanca · Accepted Answer · 2010-07-17 16:51:36Z

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.

mplungjan · Accepted Answer · 2012-11-19 10:33:02Z

replaceNode?

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

The replaceNode method is much more intuitive than the removeNode method. While the removeNode method just removes the specified element and makes its descendents children of their grandfather, the replaceNode method deletes the whole subtree that is rooted at the specified element, and substitutes it with a new element.

var msg = "";
function printChildren()  {
   childCount = bodyNode.childNodes.length;
   msg += "childCount = " + childCount;
   for(var i = 0; i < childCount; i++)  {
     msg += "\nchildNodes["+i+"].nodeName = " + bodyNode.childNodes[i].nodeName;
   }
}
printChildren();
msg += "\nReplacing Paragraph 3\n";
var b = document.createTextNode("New Body Page");
var replacedNode = p3Node.replaceNode(b);
msg += "\nreplacedNode.nodeName = " + replacedNode.nodeName;
msg += "\nreplacedNode.childNodes.length = " + replacedNode.childNodes.length;
msg += "\np2Node.nodeName = " + p2Node.nodeName;
printChildren();
alert(msg);

JochenJung · Accepted Answer · 2010-07-17 16:10:39Z

0

Using jQuery you could do:

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

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

answered Jul 17, 2010 at 16:10

JochenJung

7,24312 gold badges67 silver badges114 bronze badges

4 Comments

Brendan Bullen Over a year ago

Will this leave the inner html of the element?

Pointy Over a year ago

No, it will not. It just removes the whole thing.

JochenJung Over a year ago

No, it does not. But I understand the question as this is what it should do. The inner HTML belongs to the instance of the class s. If this is not the behaviour wanted, please let me know and I will edit.

Comma Over a year ago

How can I make it just remove the html tag? in this case the span tag and leave the text

Collectives™ on Stack Overflow

Process HTML in javascript

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related