Jquery empty() method

The empty() method removes all child nodes and content from the selected elements.This method does not remove the element itself, or its attributes.

Note -1: To remove the elements without removing data and events, use the detach() method.
Note -2: To remove the elements and its data and events, use the remove()  method.

Syntex:


$(selector).empty()


Example:1 

<!DOCTYPE html>

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>

$(document).ready(function(){

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

        $("div").empty();

    });

});

  </script>

</head>

<body>


  <div style="height:100px;background-color:yellow">

    This is text that i want to remove

    <p>This is a paragraph inside the div.</p>

  </div>


  <p>This is a paragraph outside the div.</p>


  <button>Remove content of the div element</button>


</body>

</html>