JQuery appendTo оставляет пустое пространство в предыдущем родительском контейнере

Question

я использую appendTo переместить несколько элементов вокруг в DOM:

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

Это прекрасно работает. Однако, когда они удаляются, они оставляют один символ пробела в своем предыдущем родительском узле «pre-footer». Это мешает мне использовать класс css: empty psuedo для элемента pre-footer.

Любой способ исправить это в 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, вычисленная предварительно колонтитула 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) === ''; 
});