jQuery Remove

jQuery has two method remove() and empty() which are used to remove HTML elements and contents.

The remove() method is used to remove the selected element and its child.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-remove-remove-button").click(function(){
    $("#example-jquery-remove-remove").remove();
  });
});
</script>
<ul id="example-jquery-remove-remove">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
<button class="example-jquery-remove-remove-button">Click here to remove ul and li</button>

Output

The empty() method is used to remove only child elements of selected element.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-remove-empty").click(function(){
    $("#div1").empty();
  });
});
</script>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
<p>This is some text in the div.</p>
<p>This is a paragraph in the div.</p>
</div>
<br/>
<button class="example-jquery-remove-empty">Empty the div element</button>

Output