.detach()

jQuery

previous page next page

.detach()

Categories: Manipulation > DOM Removal

.detach( [selector ] ) Returns: jQuery

Description: Remove the set of matched elements from the DOM.

  • version added: 1.4.detach( [selector ] )

    • selector
      Type: Selector
      A selector expression that filters the set of matched elements to be removed.

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

Example:

Detach all paragraphs from the DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                        how are
                                    

                                  

                                  

                                    

                                        <p>you?</p>
                                    

                                  

                                  

                                    

                                        <button>Attach/detach paragraphs</button>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                          $("p").click(function(){
                                    

                                  

                                  

                                    

                                            $(this).toggleClass("off");
                                    

                                  

                                  

                                    

                                          });
                                    

                                  

                                  

                                    

                                          var p;
                                    

                                  

                                  

                                    

                                          $("button").click(function(){
                                    

                                  

                                  

                                    

                                            if ( p ) {
                                    

                                  

                                  

                                    

                                              p.appendTo("body");
                                    

                                  

                                  

                                    

                                              p = null;
                                    

                                  

                                  

                                    

                                            } else {
                                    

                                  

                                  

                                    

                                              p = $("p").detach();
                                    

                                  

                                  

                                    

                                            }
                                    

                                  

                                  

                                    

                                          });</script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page