With jquery, We can easily remove different HTML elements.
Before reading this post please refer our JQuery Create Element post if you don’t know how to create an element using JQuery.
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - jquery remove element</title>
</head>
<body>
</body>
</html>Above structure is the basic HTML structure that contains the head and body. To use jquery in HTML code, we require jquery google CDN in head or body section.
Index
Step 1:
First, insert the following CDN into head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Note: We require above CDN in our code. JQuery CDN requires an active internet connection.
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - jquery create element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
</body>
</html> Step 2:
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - jquery create element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> //jquery google cdn
</head>
<body>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<button id="remove">Remove</button>
</body>
</html> Suppose we have order list and we want to remove list elements from <ol> elements using jquery.
Here, we remove <li> elements using jquery as follows:
<script>
$(document).ready.(function(){
$("#remove").click(function(){
$("li").remove();
});
});
</script>Explanation:
- First-line shows that function will run during loading of the HTML page.
- We select button on click using id remove.
- We remove all <li> elements from <ol> tag.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - jquery remove all element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<button id="remove">Remove</button>
<script>
$(document).ready(function(){
$("#remove").click(function(){
$("li").remove();
});
});
</script>
</body>
</html> Above code removes all list elements from <ol> tag.
We can also remove only last <li> tag using jquery.
<script>
$(document).ready.(function(){
$("#remove").click(function(){
$("li:last").remove();
});
});
</script>Explanation:
- First-line shows that function will run during loading of the HTML page.
- We select button on click using id remove.
- We remove last elements from
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Errorsea - jquery remove last element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<button id="remove">Remove</button>
<script>
$(document).ready(function(){
$("#remove").click(function(){
$("li:last").remove();
});
});
</script>
</body>
</html> 
