Updated March 23, 2023
Introduction to jQuery remove()
The method used to remove selected elements and everything inside it is called jQuery remove method. Data and events of the elements is also removed from the domain. All the text and child nodes is removed as well as the bound elements of the process. We can use selector so that if more than one element has to be removed, the elements can be separated using commas and applied. The result will be the data of selected elements removed. This method also helps to find and remove elements with its class name.
Syntax:
|
Syntax |
Parameter Description | Value Type |
Version |
| $(var).remove() | NA | NA | 1.0 |
| $(var).remove(selector) | Selector: Accepts string value which filters the matched elements. | Selector: string | 1.0 |
Examples of jQuery remove()
The following are the different examples of jQuery remove() explained in detail.
1. Without Using any Parameter
remove() method can be used without providing any input argument. There are two scenarios where this signature can be applied. They are:
a. Removing Selected Element
It removes all the data and event information associated with the selected element.
Example:
The below code snippet is designed to remove the <p> element on a button click event.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
//this is JQuery CDN directed from the JQuery website
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").remove(); //remove method is used on <p> element
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<div style="padding-left:220px;padding-top:100px;">
<p style="font-size:35px;">This session is contained under p element.</p>
<button style="padding:15px;">CLICK here to remove p element</button>
</div>
</body>
</html>Output:
Before remove() method is called:
After remove() method is called:
b. Removing the Selected Element along with its Child Elements
The method signature is also applicable where child elements are needed to be removed along with the selected element. The below code snippet is designed to remove the div element from the design. Use of remove() eliminates the child elements and related data and event information.
Example:
The below code snippet is designed to remove the <div> element along with child nodes <p> and <button> elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#panel").remove();//remove() is used on the element with id ‘panel’
});
});
</script>
<style>
//definition of ‘panel’
#panel {
padding: 5px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color:burlywood;
border: solid 2px #c3c3c3;
}
</style>
</head>
<body style="background-color:blanchedalmond;">
<div id="panel">
---Beginning of 'div' session---
<p>This session is inside the child element:paragraph.</p>
<button style="background-color: burlywood;">This button is defined as child element inside div session</button>
<br>
---End of 'div' session---
</div>
<br>
<button style="margin-centre: 500px;font-family: Arial, Helvetica, sans-serif;font-size: medium;">Click here to remove 'div' session</button>
</body>
</html>Output:
Before remove() method is called:
After remove() method is called:
2. With Using the ‘Selector’ Parameter
For jQuery remove(), a string value can be passed as input value which allows to filter elements to be removed. It also allows to eliminate more than one element by configuring multiple filter attributes as argument values having comma (,) separated.
a. Using Single Selector Parameter
In the below code snippet, remove() method is used to filter the <p> elements with class “filter”.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".filter");//remove() method is used to remove <p> element if it contains the class ‘filter’
});
});
</script>
<style>
//definition of the class ‘filter’
.filter {
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
background-color:burlywood;
border: solid 2px #c3c3c3;
width: 300px;
}
</style>
</head>
<body style="background-color:blanchedalmond;">
<p style="font-family: Arial, Helvetica, sans-serif;font-size:25px;border: solid 2px; width: 500px;">This session does not contain "filter" class</p>
<p class="filter">This session contains the class "filter"</p>
<button>Click here to remove the session with 'filter' class</button>
</body>
</html>Output:
Before remove() method is called:
After remove() method is called:
b. Using Multiple Selector Parameter
In the below code snippet, remove() method is used to filter the <p> elements with class “filter1” and “filter2”. Note that, in case of multiple filter implementation, the filter attributes need to be included as input argument having comma(,) separated.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".filter1,.filter2");//remove() method is used to remove <p> element whichcontains either the class ‘filter1’ or ‘filter2’ or both.
});
});
</script>
<style>
//Defining ‘filter1’ class
.filter1 {
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
background-color:burlywood;
border: solid 2px #c3c3c3;
width: 300px;
}
//Defining ‘filter2’ class
.filter2 {
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
background-color:chocolate;
border: solid 2px #c3c3c3;
width: 300px;
}
</style>
</head>
<body style="background-color:blanchedalmond;">
<p class="filter1">This session contains the class "filter1"</p>
<p class="filter2">This session contains the class "filter2"</p>
<p class="filter2" class="filter1">This session contains the class "filter1" and "filter2"</p>
<br>
<button class="btn1">Click here to execute filters</button>
</body>
</html>Output:
Before remove() method is called:
After remove() method is called:
Methods to Remove Elements in jQuery
Basically there are two jQuery methods that are defined to remove elements and its contents. They are,
- remove()
- empty()
The difference between these two methods is remove() method removes child elements along with the selected element whereas empty() removes only the child elements of the selected element.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("#panel").remove();
});
$(".btn2").click(function(){
$("#panel").empty();
});
});
</script>
<style>
#panel {
padding: 5px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color:burlywood;
border: solid 2px #c3c3c3;
min-height: 100px;
}
</style>
</head>
<body style="background-color:blanchedalmond;">
<div id="panel">
---Beginning of 'div' session---
<p>This session is inside the child element:paragraph.</p>
<button style="background-color: burlywood;">This button is defined as child element inside div session</button>
<br>
---End of 'div' session---
</div>
<br>
<button class="btn1">Use 'remove()' method</button>
<button class="btn2">Use 'empty()' method</button>
</body>
</html>Output:
The page is loaded on browser:
remove() method is called on the button ‘Use ‘remove()’ method’ is clicked:
empty() method is called on the button ‘Use ‘empty()’ method’ is clicked:
- Unlike the empty() method, remove() method works as withdrawing the elements out of DOM.
- Using the remove() method with input argument is analogous to:
'$(selector).filter(":contains(conditional attribute)").remove()'- In order to remove element which does not include the filter attribute, the below signature needs to be used:
$("html_element: not(selector)").remove()Here ‘ .not()’ selects the elements except the specified selector and remove() gets executed on the selected elements.
Recommended Articles
This is a guide to jQuery remove(). Here we discuss the introduction to jQuery remove() along with the examples and code implementation. You may also look at the following articles to learn more –
