How to remove contents of elements using jQuery ?
Last Updated :
24 May, 2023
In this article, we will discuss how to remove the contents of the elements using jQuery. To remove the contents of elements, we will use the empty() method and the remove() method.
The jQuery empty() method is used to remove all child nodes and their content for the selected elements. This method does not accept any parameter.
Syntax:
$(selector).empty()
Approach: In this article, first we create a div container with .main class that contains two other div elements. Also, we have created an input button element and when the user clicks on that button, the empty() method is called and it removes all child nodes and their contents.
Example: In this example, we will use the empty() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src=
</script>
<style>
.main {
width: 450px;
text-align: justify;
font-size: 18px;
}
#GFG {
padding: 5px 15px;
margin-top: 20px;
}
</style>
<script>
$(document).ready(function () {
$("#GFG").on('click', function () {
$(".main").empty();
})
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to remove the contents of
the elements using jQuery?
</h3>
<div class="main">
<div class="section1">
HTML stands for HyperText Markup
Language. It is used to design
web pages using a markup language.
HTML is the combination of
Hypertext and Markup language.
</div>
<div class="section2">
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages.
</div>
</div>
<input type="button"
id="GFG"
value="Remove Contents">
</center>
</body>
</html>
|
Output:
The remove() method in JQuery is used to remove all the selected elements including all the text. This method also removes data and all the events of the selected elements.
Syntax:
$(selector).remove()
Example: In this example, we will use the remove() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src=
</script>
<style>
.main {
width: 450px;
text-align: justify;
font-size: 18px;
}
#GFG {
padding: 5px 15px;
margin-top: 20px;
}
</style>
<script>
$(document).ready(function () {
$("#GFG").on('click', function () {
$(".main").remove();
})
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to remove the contents of
the elements using jQuery?
</h3>
<div class="main">
<div class="section1">
HTML stands for HyperText Markup
Language. It is used to design
web pages using a markup language.
HTML is the combination of
Hypertext and Markup language.
</div>
<div class="section2">
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages.
</div>
</div>
<input type="button"
id="GFG"
value="Remove Contents">
</center>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...