使用 Jquery 删除 div 后的元素

Posted 2023-05-09

【中文标题】使用 Jquery 删除 div 后的元素

【英文标题】：Removing an element after a div with Jquery

【发布时间】：2011-09-23 17:35:07

【问题描述】：

我想使用 jquery 删除直接跟在 div 后面的 p 标签。这是我的 html：

<div class="fbcommentbox"></div>
<p>Powered by <a href="http://pleer.co.uk/wordpress/plugins/facebook-comments/">Facebook Comments</a></p>

所以在这种情况下，<p> 标签内的所有内容都将设置为display:none。

这似乎在 jquery 中执行起来非常简单，但我似乎无法将手指放在它上面。任何帮助都会很棒。谢谢！

【参考方案1】：

$('div.fbcommentbox + p').hide();

hide() 设置display: none。 remove() 从 DOM 中移除元素。

选择你需要的。

【讨论】：

@Tomalak，你能解释一下为什么next() 是不可取的吗？ :-)

@Ben：这不是不可取的，但它比选择器慢（因为有了这个选择器，jQuery 可以使用现代浏览器原生支持的querySelectorAll）。在这种情况下，实际差异可能可以忽略不计，但记住这一点对于更复杂的场景很有用。

为了好玩，我在 + 和 .next() 之间进行了性能检查，看起来 next 更快，如果（对于某些阅读）你必须遍历来自循环内的 DOM。 jsperf.com/jquery-next-vs-plus

我尝试了 onclick $(this + 'p').remove() 这会删除 myclass 旁边的所有

【参考方案2】：

这应该可行：

$('.fbcommentbox').next('p').remove();

我们选择div，然后使用next获取下一个元素。

【讨论】：

也许.next('p') 会更干净。

【参考方案3】：

$('.fbcommentbox').next().hide(); 或$('.fbcommentbox').css('display','none')。