jQuery remove element that contains another element with the class of ___

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.

Answer 2

Just start by selecting the element with the specific class, then remove its parent.

<p>
 :
 <a class="tumblr_blog">...</a>
 ...
</p>

<script type="text/javascript">
$(document).ready(function() {
  $('p a.tumblr_blog').parent().remove();
});
</script>

Answer 3

或者你可以做一个'普通'的CSS选择器，然后使用.parent()方法。

$("p a.tumblr_blog").parent().remove();

Answer 4

document.querySelectorAll("*[class~='className']") will return a nodelist of all of the nodes with that class. Then loop through each one and use .parentNode to get a reference to its parent, which you can then remove it from its .parentNode using ref.parentNode.removeChild(ref); Put all together:

var nodesWithClass = document.querySelectorAll("*[class~='className']");
for (var i=0;i<nodesWithClass.length;i++)
{
    nodesWithClass[i].parentNode.parentNode.removeChild(nodesWithClass[i].parentNode);
}