JS - Remove a tag without deleting content

Question

I am wondering if it is possible to remove a tag but leave the content in tact? For example, is it possible to remove the SPAN tag but leave SPAN\'s content there?

Answer 1

If it’s the only child span inside the parent, you could do something like this:

HTML:

<p class="parent">The weather is sure <span>sunny</span> today</p>;

JavaScript:

parent = document.querySelector('.parent');
parent.innerHTML = parent.innerText;

So just replace the HTML of the element with its text.

Answer 2

If you're not looking for a jQuery solution, here something that's a little more lightweight and focused on your scenario.

I created a function called getText() and I used it recursively. In short, you can get the child nodes of your p element and retrieve all the text nodes within that p node.

Just about everything in the DOM is a node of some sort. Looking up at the following links I found that text nodes have a numerical nodeType value of 3, and when you identify where your text nodes are, you get their nodeValueand return it to be concatenated to the entire, non-text-node-free value.

https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nodeValue

var para = document.getElementById('p1')  // get your paragraphe 
var texttext = getText(para);             // pass the paragraph to the function
para.innerHTML = texttext                 // set the paragraph with the new text

function getText(pNode) {

    if (pNode.nodeType == 3) return pNode.nodeValue;

    var pNodes = pNode.childNodes        // get the child nodes of the passed element
    var nLen = pNodes.length             // count how many there are
    var text = "";

    for (var idx=0; idx < nLen; idx++) {   // loop through the child nodes
        if (pNodes[idx].nodeType != 3 ) {  // if the child not isn't a text node
            text += getText(pNodes[idx]);  // pass it to the function again and 
                                           // concatenate it's value to your text string  
        } else {
            text += pNodes[idx].nodeValue  // otherwise concatenate the value of the text
                                           // to the entire text
        }

    }

    return text
}

I haven't tested this for all scenarios, but it will do for what you're doing at the moment. It's a little more complex than a replace string since you're looking for the text node and not hardcoding to remove specific tags.

Good Luck.

Answer 3

<p>The weather is sure <span>sunny</span> today</p>;


var span=document.getElementsByTagName('span')[0]; // get the span
var pa=span.parentNode;
while(span.firstChild) pa.insertBefore(span.firstChild, span);

pa.removeChild(span);

Answer 4

$(function(){

   var newLbl=$("p").clone().find("span").remove().end().html();
    alert(newLbl);

});​

Example : http://jsfiddle.net/7gWdM/6/

Answer 5

If someone is still looking for that, the complete solution that has worked for me is:

Assuming we have:

<p>hello this is the <span class="highlight">text to unwrap</span></p>

the js is:

// get the parent
var parentElem = $(".highlight").parent(); 

// replacing with the same contents
$(".highlight").replaceWith( 
    function() { 
        return $(this).contents();
    }
);

// normalize parent to strip extra text nodes
parentElem.each(function(element,index){
    $(this)[0].normalize();
});

Answer 6

jQuery has easier ways:

var spans = $('span');
spans.contents().unwrap();

With different selector methods, it is possible to remove deeply nested spans or just direct children spans of an element.