this function highlight selected text, how can i delete the span made by javascript clicking the highlighted text?

Question

I found this javascript code to highlight selected text, how can i add a function to delete the highlight background (deleting the span that was created) just clicking the highlighted text?

highlight=function()
    {       
    var selection= window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span= document.createElement("span");
    span.style.backgroundColor = "yellow";
    span.appendChild(selectedText);
    selection.insertNode(span);
    }

because i dont want change the background to transparent, i wanna delete the span who make the background in my function — Jaime A Sanchez R
– Jaime A Sanchez R, Commented Jan 2, 2012 at 3:37
Sorry im new in here, Sergio if you can please help me with my question, thanks — Jaime A Sanchez R
– Jaime A Sanchez R, Commented Jan 2, 2012 at 3:40

mVChr · Accepted Answer · 2012-01-02 04:04:42Z

3

window.highlight = function() {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement("span");
    span.style.backgroundColor = "yellow";
    span.appendChild(selectedText);
    span.onclick = function (ev) {
        this.parentNode.insertBefore(
            document.createTextNode(this.innerHTML), 
            this
        );
        this.parentNode.removeChild(this);
    }
    selection.insertNode(span);
}

See demo

answered Jan 2, 2012 at 4:04

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

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

Collectives™ on Stack Overflow

this function highlight selected text, how can i delete the span made by javascript clicking the highlighted text?

1 Answer 1

See demo

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related