jQuery empty() vs remove()

jQuery remove()

The jQuery remove() method will remove the selection and its contents. This method also removes data and events of the selected elements.
$("h2").remove();
<h2>Press the button to remove this heading</h2>
Use remove() method 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.
run this source code Browser View

Press the button to remove this heading

Full Source
<html> <head> <title>jQuery remove() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function(){ $("h2").remove(); }); }); </script> </head> <body> <button id="btn">Remove</button> <br> <h2>Press the button to remove this heading</h2> </body> </html>

jQuery empty()

The jQuery empty() method will remove all the contents of the selection. This method does not remove the element itself, or its attributes .
$("div").empty();
<div style="height:10%;background-color:green"> Press the button to empty this heading </div>
In this method you can restore all data but not event handlers of removed elements from the DOM. All data and events related with elements will be removed.
run this source code Browser View


Press the button to empty this heading
Full Source
<html> <head> <title>jQuery empty() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function(){ $("div").empty(); }); }); </script> </head> <body> <button id="btn">Empty</button> <div style="height:10%;background-color:green"> Press the button to empty this heading </div> </body> </html>