jquery - How to select an element's parent and the parent's siblings

Question

I have this code:

$("#test").siblings('p').remove();
$("#test").remove();

How can I chain this code instead of writing it separately?

Answer 1

You want to use addBack() in this case:

$("#test").siblings('p').addBack().remove();

---

EDIT

Firstly, for future visitors, if you're using jQuery version 1.8-, you're probably need to use andSelf() which is the predecessor of addBack() for compatibility issues.

Secondly, both end and addBack will do the same task in this case but they're actually different perspective. Take a look at this HTML:

<div class="grandpa">
    <div class="dad">
        <div class="son">
            Test
        </div>
    </div>
</div>

If we're using end():

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .end()
    .addClass('adult')
    .end()
.addClass('oldster');

The result will look like this:

<div class="grandpa oldster">
    <div class="dad adult">
        <div class="son youngster">
            Test
        </div>
    </div>
</div>  

So when we use end() for son, we're telling jQuery that it need to go back from son to parent set which is dad and add class adult.

But when we use addBack:

$('.grandpa')
    .find('.dad')
        .find('.son')
        .addClass('youngster')
        .addBack()
        .addClass('adult')
        .addBack() // This simply do nothing since `addBack` is not traverse up DOM element 
        .addClass('oldster');    

which will result in this:

<div class="grandpa">
    <div class="dad adult oldster">
        <div class="son youngster adult oldster">
            Test
        </div>
    </div>
</div>

So when we call addBack on son, we're telling jQuery to push dad and son into the same room and add new class adult and oldster to both of them.