jQuery remove()

jQuery provides two methods to remove HTML elements and content:

  • remove()
  • empty()

The jQuery remove() method removes the selected elements and its child elements out of the DOM. Removal of more than one element is also possible with the jQuery remove() method. All the elements should be separated with comma (,) for removal of multiple elements.

Syntax:

$(selector).remove() 

Example 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("#div1").remove();
	});
});
</script>
</head>
<body>
 
<div id="div1" style="height:100px;width:100px;border:5 px solid black;background-color:yellow;">
 
</div>
<br>
 
<button>Remove</button>
 
</body>
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
    	$("p, #div1").remove();
	});
});
</script>
</head>
<body>
 
<p> Hello! </p>
<br>
<div id="div1" style="height:100px;width:100px;border:5px solid black;background-color:yellow;">
 
</div>
 
 
<button>Remove</button>
 
</body>
</html>

Try it

JS Bin on jsbin.com

Please Share