The jQuery empty() method is used to remove content and child nodes from selected elements. This method does not remove by itself.
Syntax
$(selector).empty()
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(document).ready(function () {
$('.remove').click(function () {
$('.main').empty(); // empty method
});
$('.add').click(function () {
$('.main').text('Lorem ipsum dolor sit amet,'
+ 'consectetur adipiscing elit, sed do eiusmod tempor'
+ ' incididunt ut labore et dolore magna aliqua.'
+'Ut enim ad minim veniam,'
+'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ');
});
});
</script>
<style>
body {
padding:10px;
margin:10px;
box-sizing:border-box;
}
div{
background-color:orange;
color:white;
width:50%;
height:auto;
font-size:35px;
padding:10px;
margin:10px;
border:2px solid black;
}
</style>
</head>
<body>
<button class='remove'>Empty Data form box</button>
<button class='add'>add Data in box</button>
<div class='main'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has en the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</body>
</html>
Output:
