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

chaining, css-selectors, jquery, jquery-selectors, removeall

Solution

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.

Problem

Original source