Open In App

jQuery | Remove Elements

Last Updated : 27 Feb, 2019
Comments
Improve
Suggest changes
Like Article
Like
Report
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. html
<!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. html
<!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>
Output: Before Click on the Button: After Click on the Button:

Similar Reads