`
jQuery Remove
jQuery Remove Elements
To remove elements and content, there are mainly two jQuery methods.
- Remove()
- Empty()
1. jQuery Remove() method
This method are used to removes the selected elements and its child elements. In below example remove both paragraph and div section.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:green; color:white;">
Some text in the div.
<p>paragraph1 in the div.</p>
<p>paragraph2 in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>Output
Now click on remove div element button to remove div on selected item.
2. jQuery Empty() method
This method is used to removes the child elements from the selected element. The below example have div is the parent element and child elements is paragraph P.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:green; color:white;">
Some text in the div.
<p>paragraph1 in the div.</p>
<p>paragraph2 in the div.</p>
</div>
<br>
<button>Empty div element</button>
</body>
</html>Output
Now click on Empty div element button to removes the child elements from the selected element.
Prev Next