jQuery Remove

Using the jQuery, it is easy to remove the existing HTML content. There are two jQuery methods to remove the content:

remove()
empty()

jQuery remove() Method

The jQuery remove() method is used to remove the selected element(s) and its child elements. It also removes the data and the events of the selected elements. Syntax:
$(selector).remove(selector)
Selector: It is used to specify whether to remove one or more elements. You can use comma (,) to separate more than one element. It is an optional parameter.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").remove();  
    });  
});  
</script>  
</head>  
<body>  
<div id="div1" style="height:150px;width:300px;border:1px solid black;">  
<h3>This is the div heading.</h3>  
<p>This is second div paragraph.</p>  
 This is the div text.  
</div>  
<br>  
<button>Remove div content</button>  
</body>  
</html>
Try Now

jQuery empty() Method

The jQuery empty() method is used to remove the child elements of the selected element(s). It doesn't remove the element itself. Syntax:
$(selector).empty()

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").empty();  
    });  
});  
</script>  
</head>  
<body>  
<div id="div1" style="height:150px;width:300px;border:1px solid black;background-color:orange;">  
<h3>This is a div heading.</h3>  
<p>This is another paragraph in the div.</p>  
 This is some text in the div.   
</div>  
<br>  
<button>Empty the div element</button>   
</body>  
</html>
Try Now