jQuery appendTo leaves white space in previous parent container

Question

I'm using appendTo to move a couple of elements around in the DOM:

jQuery('.footer-pre-home.box.s5,.footer-two.box.s5').appendTo('.footer .copyright');

This works fine. However, when they are removed, they are leaving a single whitespace character in their previous parent node "pre-footer". This is preventing me from using the css :empty psuedo class on the pre-footer element.

Any way to fix this in the appendTo?

The original html is below:

<div class="pre-footer">
    <div class="footer-two box s5">
        <div class="textwidget">
            <ul class="social flat">
                <li class="twitter"><a href="http://twitter.com"></a></li>
                <li class="facebook"><a href="http://facebook.com"></a></li>
                <li class="google"><a href="http://plus.google.com"></a></li>
                <li class="youtube"><a href="http://youtube.com"></a></li>
                <li class="linkedin"><a href="http://linkedin.com"></a></li>
                <li class="rssfeed"><a href="feed/"></a></li>
            </ul>
        </div>
    </div>
</div>

After the appendTo, the computed pre-footer html looks like this:

<div class="pre-footer">
</div>

I can't remove the node because there may be elements inside it that are not targets of the appendTo. However, in this case, not.

Answer 1

.appendTo only accepts target, it doesn't leave textNode, there is textNode in your element, instead of using :empty selector you can use the .filter() method and check the length of the trimmed content:

var $empty = $(".footer .pre-footer").filter(function() {
  return !$.trim(this.innerHTML).length;      
  // return $.trim(this.innerHTML) === '';
});