Question

I’ve looked for days and I cannot find a solution to this problem. It’s probably VERY obvious, but is there a way to remove an element that contains another element with the class of something? In this case, I want to remove a <p> element that contains an anchor with the class of “tumblr_blog”. I would use :contains, but the paragraph by default contains a colon which does not have a class, and the paragraph element does not have a class, so is there a way to remove a paragraph that contains an anchor with the class of tumblr_blog? This script should also remove the : in the paragraph even though it doesn’t have a class. If anyone could help me it would really make my night. Thanks!

EDIT: Thank you Alex! One last thing, it works on the first page, but when new elements are loaded via the infinite-scroll function by Paul Irish, the code no longer works because a new page is loaded without refreshing. Here is my code, is there a way to implement the code on new elements that are loaded?

<script>
$(function(){
var $container = $('#posts');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
columnWidth: 370,
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation 
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '#entry', // selector for all items you'll retrieve
loading: {
finishedMsg: '<em></em>',
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>

Answer 1

…is there a way to remove a paragraph that contains an anchor with the class of tumblr_blog?

You could use the :has() selector.

$('p:has(a.tumblr_blog)').remove();

jsFiddle.

For better performance, select all p and then use the has() method.

If you don’t have jQuery, you could do it with…

var allP = document.querySelectorAll('p');

Array.forEach(allP, function(p) {
    if (p.querySelector('a.tumblr_blog').length) {
        p.parentNode.removeChild(p);
    }
});

So it works with the Infinite Scroll plugin, add this code to the callback when new content is loaded in as per the documentation.