jQuery appendTo 在前一个父容器中留下空白

Question

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

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

这很好用。但是，当它们被删除时，它们会在其先前的父节点“pre-footer”中留下一个空白字符。这使我无法在 pre-footer 元素上使用 css :empty psuedo 类。

有什么办法可以在 appendTo 中解决这个问题？

原始html如下：

<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 之后，计算出的 pre-footer 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) === '';
});