JQuery Remove Element

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.

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>  

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
JQuery Create Element
JQuery Create Element

With JQuery, We can easily create different HTML elements and also insert them into components. Above structure is the basic...

Close