How to choose an element's parent and siblings

Question

I have this code:

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

How can I link this code and not write it separately?

Answer 1

You want to use addBack () in this case:

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

---

EDIT

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

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

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

If we use 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> 

Therefore, when we use end() for son , we tell jQuery that he needs to return from son to the parent set, which is dad , and add the adult class.

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 the following:

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

Therefore, when we call addBack on son , we tell jQuery to push dad and son into the same room and add both the class adult and oldster classes to them.

Answer 2

The end() method is useful primarily when using jQuery chain properties. If you are not using a chain, we can usually just call the previous object with the variable name, so we do not need to manipulate the stack.

A new set of items is pushed onto the stack, which is supported inside the object . Each subsequent filtering method pushes a new set of items onto the stack. If we need an older set of elements, we can use end() to pull the sets back from the stack.

I suggest using .end() as follows:

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

You can find the script

---

Some explanation:

Now what happens to this code snippet above:

Suppose this HTML markup:

 <div id='container'> <div id='test'>This is supposed to be removed.</div> <p>And this to be removed too.</p> </div> 

when the script executes:

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

this block removes the sibling <p> element from the view, then the markup will be updated as follows:

 <div id='container'> <div id='test'>This is supposed to be removed.</div> </div> 

and if we bind it to .end()

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

it returns to the stack in the #test div, after which the next part of the script runs

 $("#test").siblings('p').remove().end().remove(); //--^^^^^^^^^^^^^^^----this next part 

and #test are removed from the view, and your final markup output will look like this:

 <div id='container'> </div> 

Answer 3

Maybe off topic .. you can change the view of the problem:

 $("#test, #test ~ p").remove(); // !! incorrect way, see comment below 

Sorry guys :( my decision is wrong !!

The selector ~ 'is not equal to the' sibling 'method. ' ~ ' selects all sibling p 'elements that follow AFTER the #test element.

Therefore, I propose another solution:

 $("#test, > p", $('#test').parent()).remove(); 

This is not very elegant, but the fastest way. Please check it out http://jsperf.com/how-to-chain-this-code-stackoverflow-16009101 '

Performance Test Result:

PS http://jsfiddle.net/Dpe59/

Answer 4

I have to agree with the comment on this; for ease of reading and maintenance, andSelf :

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

Unfortunately, it is out of date. But if you are stuck in an older version of jquery like us, this might be useful.

Answer 5

 $("#text").siblings('p').remove().prevObject.remove(); 

edit Although this works, do not do this. as Matt says, prevObject undocumented

Answer 6

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

Answer 7

Try the following:

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