.remove()

jQuery

previous page next page

.remove()

Categories: Manipulation > DOM Removal

.remove( [selector ] ) Returns: jQuery

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

  • version added: 1.0.remove( [selector ] )

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

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

Consider the following HTML:

1
2
3
4
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="hello">Hello</div>
                                  

                                

                                

                                  

                                      <div class="goodbye">Goodbye</div>
                                  

                                

                                

                                  

                                    
                                      </div>

We can target any element for removal:

1
 
                                

                                  

                                    $('.hello').remove();

This will result in a DOM structure with the <div> element deleted:

1
2
3
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="goodbye">Goodbye</div>
                                  

                                

                                

                                  

                                    
                                      </div>

If we had any number of nested elements inside <div class="hello">, they would be removed, too. Other jQuery constructs such as data or event handlers are erased as well.

We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:

1
 
                                

                                  

                                    $('div').remove('.hello');

This would result in the same DOM structure:

1
2
3
 
                                

                                  

                                    
                                      <div class="container">
                                    
                                  

                                

                                

                                  

                                      <div class="goodbye">Goodbye</div>
                                  

                                

                                

                                  

                                    
                                      </div>

Examples:

Example: Removes all paragraphs from the DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                        how are
                                    

                                  

                                  

                                    

                                        <p>you?</p>
                                    

                                  

                                  

                                    

                                        <button>Call remove() on paragraphs</button>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                        $("p").remove();
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Removes all paragraphs that contain "Hello" from the DOM. Analogous to doing $("p").filter(":contains('Hello')").remove().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p class="hello">Hello</p>
                                    

                                  

                                  

                                    

                                        how are
                                    

                                  

                                  

                                    

                                        <p>you?</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <button>Call remove(":contains('Hello')") on paragraphs</button>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                        $("p").remove(":contains('Hello')");
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page