jQuery删除包含另一个类为___的元素的元素答案

【问题标题】：jQuery remove element that contains another element with the class of ___jQuery删除包含另一个类为___的元素的元素
【发布时间】：2012-02-08 00:49:33
【问题描述】：

我已经找了好几天了，但我找不到解决这个问题的方法。这可能很明显，但是有没有办法删除一个包含另一个元素的元素？在这种情况下，我想删除一个 <p> 元素，该元素包含一个带有“tumblr_blog”类的锚点。我会使用 :contains，但默认情况下该段落包含一个没有类的冒号，并且该段落元素没有类，那么有没有办法删除包含 tumblr_blog 类的锚的段落？该脚本还应该删除段落中的 :，即使它没有类。如果有人可以帮助我，那真的会让我度过一个美好的夜晚。谢谢！

编辑：谢谢亚历克斯！最后一件事，它可以在第一页上运行，但是当通过 Paul Irish 的无限滚动功能加载新元素时，代码不再有效，因为在没有刷新的情况下加载了新页面。这是我的代码，有没有办法在加载的新元素上实现代码？

<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>

【问题讨论】：

标签： javascript jquery tumblr

【解决方案1】：

...有没有办法删除包含tumblr_blog 类锚的段落？

您可以使用:has() 选择器。

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

jsFiddle.

为了获得更好的性能，请选择所有p，然后使用has() 方法。

如果你没有 jQuery，你可以使用...

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

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

所以它可以与Infinite Scroll 插件一起使用，根据文档在加载新内容时将此代码添加到回调中。

【讨论】：

天哪，非常感谢。我一直在努力解决这个问题这么久！你有Skype吗？
@JamesCharless 我愿意，但是您希望出于什么原因与我联系？
好吧，我在 jquery 和 javascript 方面做得很差，但我最终总是会编写很多代码。我不想用我认为其他人认为不成熟的愚蠢问题向垃圾邮件堆栈溢出，所以我想知道当我有 javascript/jquery 问题时是否可以问你？你看起来是一个非常聪明和善良的人。 :-) 此外，该脚本有效，但仅在我博客的第一页上。当我的博客通过无限滚动加载第二页时，p 元素又回来了。我怎样才能做到这一点，所以他们总是被删除？ http://-respawn.tumblr.com/
@JamesCharless 我真的不在这里提供无偿帮助。您需要在无限滚动函数的回调中调用此代码。
叹息..我不喜欢人们对问题收费。但无论如何，我该怎么做呢？我知道代码会放在这个区域，但是在哪里呢？： function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $newElems.animate({ opacity: 1 }); $container.masonry('appended', $newElems, true ); }); }); });

【解决方案2】：

首先选择具有特定类的元素，然后删除其父元素。

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

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

【讨论】：

如果a 不是p 的直接后代，这将不起作用。你可以使用closest('p')。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

document.querySelectorAll("*[class~='className']") 将返回具有该类的所有节点的节点列表。然后遍历每一个并使用 .parentNode 获取对其父级的引用，然后您可以使用 ref.parentNode.removeChild(ref); 将其从其 .parentNode 中删除；放在一起：

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

【讨论】：

哈哈，错过了 JQuery 标签 - JQuery 让它变得非常简单，因为其他答案会告诉你。