My sample HTML markup is below. In each of the three nested sets of divs, I’m removing all <p>
tags except for the first <p>
.
But now I find I want to not remove all the <p>
tags from just the first nested divs that have the anchor link a name="123"
How do I use an if
statement and the name="123"
attribute to exclude the first set of nested divs from having all their <p>
tags removed?
Fiddle: https://jsfiddle.net/rbo6gtLd/
Edit 10/4/24
Thanks to Phil for his answer, but I want to use the format of my original function. But this updated jQuery doesn’t work:
$('.post-body').each(function() {
const $this = $(this);
if ($(this).find('a[name="123"]').length == 0) {
$(this).find('p').not(":first").remove();
}
});
This original jQuery doesn’t work:
$('.post-body').each(function() {
const $this = $(this);
if ($(this).closest('[name="123"]').length == 0) {
$(this).find('p').not(":first").remove();
}
});
HTML:
<div class="post">
<a name="123"></a>
<h3 class="post-title">Post</h3>
<div class="NewPermalinkUrl">Text</div>
<div class="post-body">
<p>Content</p>
<p>Content</p> <!-- fix function so this isn't removed -->
<p>Content</p> <!-- fix function so this isn't removed -->
</div>
</div>
<div class="post">
<a name="456"></a>
<h3 class="post-title">Post</h3>
<div class="NewPermalinkUrl">Text</div>
<div class="post-body">
<p>Content</p>
<p>Content</p> <!-- this is currently removed -->
<p>Content</p> <!-- this is currently removed -->
</div>
</div>
<div class="post">
<a name="789"></a>
<h3 class="post-title">Post</h3>
<div class="NewPermalinkUrl">Text</div>
<div class="post-body">
<p>Content</p>
<p>Content</p> <!-- this is currently removed -->
<p>Content</p> <!-- this is currently removed -->
</div>
</div>
2
Answers
The problem is that
.closest()
travels hierarchically.You can use jQuery’s
:not
and:has
selectors to exclude the.post
element then search within that for the<p>
tags you want to remove.You can also use the
p:nth-child(n+2)
selector to target every<p>
tag after the first within each block.However, you can achieve exactly the same thing purely with CSS which is objectively faster and prevents flash of unstyled content.
use
.prevAll()
more about jQuery Traversing