Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery remove() Method
jQuery | remove() Method: Learn about the jQuery remove() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 15, 2022
remove() Method
As the name suggests, the remove() method helps to remove the selected elements from the web page. With this, either an element or a number of elements can be removed. This method removes everything including the content, child nodes, attributes, etc. That is, it helps to overall delete the selected elements and all the data related to them. If there is any kind of event handler declare for the element, then the remove() method deletes that too.
remove() Method Syntax
$('selector').remove();
It has a simple syntax, where the element to be removed is specified through its selector. It will remove all the elements that are matched with the provided selector. The below example shows the implementation of the remove() method. When the clone button is clicked, it creates as many copies of the image as you want. And when the remove button is triggered, it will remove all the images on the webpage.
jQuery remove() Method Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery - Remove</h2>
<p>Click the button to remove some of the selected content.</p>
<button id="one">Clone</button>
<button id="two">Remove</button>
<hr>
<img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#one").click(function(){
$('img').clone().appendTo('body');
});
$('#two').click(function(){
$('img').remove();
})
});
</script>
</html>
Output:
We can also use the remove() method by specifying the CSS class name for the element. This means when the class name is specified, then all the elements which contain that class will get removed from the page in one go. By using this way, it is easy to select all the similar class elements at once instead of specifying each one of them individually.
Syntax:
$('.class-name').remove();
jQuery remove() Method Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.bold{
font-size: larger;
font-weight: bolder;
color: green;
}
</style>
<title>Document</title>
</head>
<body>
<h2>jQuery - Remove</h2>
<p>Click the button to remove some of the selected content.</p>
<button>Remove</button>
<hr>
<p class="bold">This is sentence one.</p>
<div>This is sentence two.</div>
<h4 class="bold">This is sentence three.</h4>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('.bold').remove();
})
});
</script>
</html>
Output:
