remove()
empty()
remove()
method is used to remove the selected elements out of the DOM. It removes the selected element itself, as well as everything inside it (including all texts and child nodes). Â The empty()
method also removes the data from the selected elements.remove()
method, It removes the selected elements and child elements.<!DOCTYPE html>
<html>
<head>
<title>jQuery remove() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#my_div").remove();
});
});
</script>
<style type="text/css">
.box{
height:120px;
width:300px;
border:1px solid #0099da;
background-color:#F90;
padding:10px;
color:#FFF;
font-size:18px;
font-weight:bold;
font-style:italic;
}
.btn{ padding:6px 15px;}
</style>
</head>
<body>
<button type="button" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p>www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
</div>
</body>
</html>
empty()
method removes the child elements of the selected elements.<!DOCTYPE html>
<html>
<head>
<title>jQuery empty() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#my_div").empty();
});
});
</script>
<style type="text/css">
.box{
height:120px;
width:300px;
border:1px solid #0099da;
background-color:#F90;
padding:10px;
color:#FFF;
font-size:18px;
font-weight:bold;
font-style:italic;
}
.btn{ padding:6px 15px;}
</style>
</head>
<body>
<button type="button" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p>www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
</div>
</body>
</html>
The jQuery remove() method also accepts one parameter, which allows you to filter the elements to be removed.
The following jQuery remove() method example. It removes all <p> elements with class="testing" and class="filter_text" :
<!DOCTYPE html>
<html>
<head>
<title>Filter the Elements to be Removed</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_btn").click(function(){
$("p").remove(".testing");
});
$("#my_btn_2").click(function(){
$("p").remove(".filter_text, .filter_text_2");
});
});
</script>
<style type="text/css">
.box{
height:120px;
width:300px;
border:1px solid #0099da;
background-color:#F90;
padding:10px;
color:#FFF;
font-size:18px;
font-weight:bold;
font-style:italic;
}
.btn{ padding:6px 15px;}
.filter_text{ font-size:20px; color:#6F0}
.filter_text_2 {font-size:26px; color:#FF0;}
</style>
</head>
<body>
<button type="button" id="my_btn" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p>www.freetimelearning.com</p>
<p class="testing">www.freetimelearn.com</p>
</div><br />
<button type="button" id="my_btn_2" class="btn">Click Here!</button> <br /><br />
<div id="my_div" class="box">
Free Time Learning
<p class="filter_text">www.freetimelearning.com</p>
<p class="filter_text_2">www.freetimelearn.com</p>
</body>
</html>