Online Web Development Tutorials

jQuery empty() method is used to remove all child nodes and content from the selected elements but not remove the element itself.

empty() Syntax:

$(selector).empty();

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery empty()</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#button").click(function() {
     $("div").empty();
  });
});
</script>
</head>
<body>
 <div style='background:#11a286;color:#fff;padding:10px;margin:0 10px 5px 0;height:140px' >
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus semper enim, ut pellentesque risus accumsan venenatis. Nunc leo erat, blandit at mollis in, placerat vel metus. Duis vitae volutpat eros, ut accumsan tellus. Proin tincidunt ante id neque viverra, id convallis ex consectetur. Aenean id dapibus neque. Suspendisse turpis erat, dignissim condimentum pulvinar sed, cursus nec ex. Nulla malesuada leo vel fringilla eleifend. Aliquam eu pellentesque odio. Suspendisse sollicitudin tincidunt augue, ut scelerisque massa tempor quis.</p>
 </div>
 <button style="margin:0 0 10px 0" class="btn" id="button">Click here</button><br />
 </body>
</html>

JQuery Empty()