jQuery: How to replace DOM nodes with their contents
You know that you can use jQuery's
text() to get an element's contents without any tags.
If you want to remove only some tags, but keep others, use
unwrap(). Here is how.
Consider the following example element.
$container = $('<div><strong>Hello</strong> <em>World</em></div>')
Let's say we want to discard any
<em> tags, but keep their contents.
find them, then dive into their child nodes via
contents, and use
unwrap replace their parents (the found
ems) with the children.
Note that this modifies the elements inside
$container directly. When you look at the DOM now, the
<em> will be gone, but its contents will be kept.
$container.html() // returns "<strong>Hello</strong> World"
Also note that
contents() includes text and comment nodes which is essential for this approach to work. jQuery usually won't reveal such nodes to you.