jQuery | Remove Elements

Last Updated : 27 Feb, 2019

In jQuery, in order to remove element and content you can use anyone of the following two jQuery methods:
Methods:

remove() – It is used to remove the selected element (and its child elements).
empty() – It is used to removes the child elements from the selected element.

Example-1: Using the jQuery remove() Method.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>jQuery remove() Method</title> 
  
  <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">   
            GeeksForGeeks</h1> 
        <h2 id="GFG"> 
          jQuery remove() Method</h2> 
        <br> 
        <button>Click</button> 
        <script> 
            $(document).ready(function() { 
                $("button").click(function() { 
                    $("#GFG").remove(); 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html> 

Output:

Before Click on the Button:

After Click on the Button:

Example-2: Using the jQuery empty() Method.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>jQuery empty() Method 
  </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">   
            GeeksForGeeks</h1> 
        <h2 id="GFG"> jQuery empty() Method 
      </h2> 
        <br> 
        <button>Click</button> 
        <script> 
            $(document).ready(function() { 
                $("button").click(function() { 
                    $("#GFG").empty(); 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html> 