jQuery remove last three elements after specific element

Question

How do I remove the last three items (which have the same class), after a specific element (p#heading)?

<p id="heading">HEADING</p>
<p class="txt"></p>
<p class="txt"></p>
<p class="txt"></p>
<p class="txt"></p>
<p class="txt"></p>
<p class="txt"></p>

Thanks already!

Answer 1

You need to use the ~ selector.

$(document).ready(function() {
    var allTxt = $('#heading ~ .txt');
    var toBeRemoved = allTxt.slice(allTxt.length - 3);
    toBeRemoved.remove();
});​​

Answer 2

This matches .txt elements after p#heading and slices the selection to the last three in the matched set.

$matchedElements = $('p#heading').nextAll('.txt').slice(-3);​​

Answer 3

Try this:

$("p#heading").siblings(".txt").slice(-3).remove();