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.
Browser ViewPress the button to remove this heading
<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.
Browser View
Press the button to empty this heading
<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>
Related Topics