JavaScript: How to remove tags from node?

Question

In a previous question someone put me on to "rangy" http://code.google.com/p/rangy/. It's interesting even if I don't fully understand it. I am not a JavaScript person. However, I have managed to do most things with it that I need with the exception of 1. The concept is a very basic RTE, just bold, italic etc. I managed that, created a link - done that too, OK what might have taken a JS guy 2 mins has taken me hours and hours - frustrating but I think I am learning a bit - very slowly. Anyhow, using rangy I can create (excuse poor code) an href link like this:

$('#linkbut').live('click',function(){
        var sel = rangy.getSelection();     
        var range = sel.getRangeAt(0); 
        range.splitBoundaries(); 
        var textNodes = range.getNodes([3]); 
            for (var i = 0, len = textNodes.length; i < len; ++i) { 
            var newLink = document.createElement('a');
            newLink.setAttribute('href','test.html');
            var linkText = document.createTextNode(sel);
            var parent = textNodes[i].parentNode;
            parent.insertBefore(newLink,textNodes[i]); 
            newLink.appendChild(linkText);
            range.deleteContents();
            }
    });

#linkbut is a simple HTML button and the actual href (test.html) above will come from the value of an input field and not be "hard coded". But what I cannot get done is "delete" the link if I want to remove it.

Further explanation: Once the link is created I may want to delete it so I have tried the "reverse" of the code above - obviously no good, so have got "this far":

$('#deletelink').live('click',function(){
                var sel = rangy.getSelection();     
                var range = sel.getRangeAt(0); 
                range.splitBoundaries(); 
                var textNodes = range.getNodes([3]); 
                var txt = sel.toString();
                range.deleteContents();
                var replaceText = document.createTextNode(txt);
                sel.appendChild(replaceText);

            });

What I really would like to do (may not be possible) is to have some "generic" function that removes ANY tag element from a node in the above what I am trying to do is:

1. Get the range - sel = rangy.getSelection();
2. Turn "sel" into a string variable var txt = sel.toString();
3. Delete the content - including the a elements range.deleteContents(); then
4. Replace the deleted with the "text" version var replaceText = document.createTextNode(txt); sel.appendChild(replaceText);

I get "so far" the content is deleted BUT I cannot get the "new - text replacement" to function.

Hope all is clear - cos it isn't to me ;)

Answer 1

I know an old question but I had the same issue and found a viable solution here.

var el = document.getElementsByTagName('span')[0]; // Get the element in question
var pa = el.parentNode;

while(el.firstChild) {
    pa.insertBefore(el.firstChild, el);
}

pa.removeChild(el);
pa.normalize();

Edit: The normalize() method is important so that you don't have a bunch of adjacent text nodes. It causes all the text nodes to be aggregated into one text node again.

For your exact question, you could iterate over all the nodes and then execute the above code.