“display:none” content copied to clipboard, visible when pasted

Question

I\'m having a problem with non-displayed HTML elements being copied to the clipboard, and then displayed when the content is pasted into MS Word, Outlook, etc.

For e

Answer 1

Here is the solution I used to work around it.

The strategy:

1. generate a unique number when you remove an element
2. replace element in the DOM with a new div (aka: the replacer div) with an ID which we will be able to find given that we know the unique number generated in the last step.
3. add a property to the element so that when we see it later we can extract the unique number
4. move the element into a div which is declared in a variable to remove it from the document completely.
5. When we want to move the element back we simply get the unique number from the property, locate the replacer div we left behind and replace it with the original element.

Here are some notes:

1. I used slideUp() and slideDown() to animate the removal, but you can replace those calls as you see fit.
2. I put the elements in a div element in a variable. You could choose to move it somewhere else in the DOM, but I wanted it completely removed. You could also just put it in a variable or an array. The reason I used a div variable is I wanted to be able to use jQuery's DOM search on it, but I didn't want it in the DOM. For example, I can do: whereHiddenThingsLive.find('.some-class').

The code:

var whereHiddenThingsLive = $('
');
var nextNum = 0;

function hideElement(element) {
    if (element.hasClass('sop-showing')) {
        element.finish();
    }
    if (element.is(':hidden') || element.hasClass('sop-hiding')) return;
    var num = nextNum++;
    element.addClass('sop-hiding');
    element.slideUp(400, function () {
        var replacer = $('
').prop('id', 'hide-replacer-' + num);
        element.prop('replaced-by', num);
        element.after(replacer);
        element.appendTo(whereHiddenThingsLive);
        element.removeClass('sop-hiding');
    });
}

function showElement(element) {
    if (element.hasClass('sop-hiding')) {
        element.finish();
    }
    if (element.is(':visible') || element.hasClass('sop-showing')) return;
    element.addClass('sop-showing');
    var num = element.prop('replaced-by');
    element.detach();
    element.removeProp('replaced-by');
    $('#hide-replacer-' + num).after(element).remove();
    element.slideDown(400, function() {
        element.removeClass('sop-showing');
    });
}