jQuery appendTo 在上一个父容器中留下空格

Question

我正在使用appendTo在DOM中移动几个元素：

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

这工作正常。但是，当它们被删除时，它们会在其以前的父节点"前页脚"中留下一个空格字符。这阻止我在预页脚元素上使用 css ：empty 伪装类。

有什么方法可以在附录中解决此问题吗？

原始网页如下：

<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>

在 appendTo 之后，计算出的预页脚 html 如下所示：

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

我无法删除节点，因为其中可能存在不是 appendTo 目标的元素。但是，在这种情况下，不是。

Answer 1

.appendTo只接受目标，它不会留下textNode，你的元素中有textNode，而不是使用:empty选择器，你可以使用 .filter() 方法并检查修剪内容的长度：

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