remove() not removing element from all parent elements of same class

Question

I have a load of Wordpress posts, and when the browser is below a certain size, I need to move one of the elements within each post into another element (this is a design requirement).

I am using the below to loop through each post, and move the element post-comments into the post-meta div.

jQuery('.post-entry').each(function(){ // Loop through each post...
  if( jQuery(this).find('.post-meta .post-comments').length == 0 ) {
    jQuery(this).find('.post-extra span.post-comments').appendTo('.post-meta'); // Move categories into the ".post-meta" div
    jQuery(this).find('.post-extra span.post-comments').remove();
  }
});

JSFiddle to follow, but the current behavior is that the first post-entry works as fine, and the post-comments element is moved into post-meta and removed from its original place, however on the other post-entry divs, the post-comments element is not being removed from its original position - can anyone see why?

Basically, I need to move post-comments from its original location into an element called post-meta on multiple posts on the page I am working on.

Answer 1

After moving the very first post, the following check will always fail, because it checks the first element (which you already moved):

if( jQuery('.post-entry').find('.post-meta .post-comments').length == 0 )

instead write:

if( $(this).find('.post-meta .post-comments').length == 0 )

because inside a $().each() loop, this is referencing the current element of your resulting node list:

wrong:

jQuery('.post-entry').each(function(){ // Loop through each post...
  if( jQuery('.post-entry') // <- does not reference the current element

correct:

jQuery('.post-entry').each(function(){ // Loop through each post...
  if( $(this) <- always references your current element of the each loop

Answer 2

jQuery('.post-entry').each(function() {
    var $post = jQuery(this),
        $meta = $post.find('.post-meta');

    if ($meta.find('.post-comments').length == 0) {
        $post.find('.post-extra .post-comments').appendTo($meta);
    }
});

The difference here is that I've made sure you're always finding and appending within $(this) . Your length check was checking all .post-entry s and your appendTo was appending to all .post-meta s so the second time it iterated through the loop, the length check would not be 0 .

If you do it this way, you don't need the .remove at all as the appendTo moves it.

Answer 3

试试这个

jQuery(this).find('.post-extra span.post-comments').parent().remove();  

Answer 4

If the removed element is a 'child', you can try this:

$('#parentElement').children().remove(); //For all childs

$('#parentElement').children('div').remove(); //For all childs that are divs


$('#parentElement').children('div.classOfDiv').remove(); //For all childs that are Divs with X class

If the children() doesn't work. Try play with next() and closest() . It helped me sometimes.

Something that helps also, to supply find() (that gave me problems in the past), could be this:

HTML EXAMPLE:

<div>
  <ul>
    <li class="class1"></li>
    <button onclick="trigger()">access the li element</button>
  </ul>
</div>

If you want to access li you can also try something strange, but works:

$('this').closest('div').$('.class1').remove();  //When clicking the button, for example

This helped me sometimes, because closest() finds elements above your current location, and not beneath.

I don't have clear what you are asking, but maybe this could help you a bit.

I hope it helped you. Have good luck and let us know how it goes! ;)