How to Remove an Element with jQuery

Submitted by razormist on Thursday, September 29, 2022 - 22:53.

In this tutorial we will create a How to Remove an Element with jQuery. This tutorial target new programmers who has started learning programming or want to learn about JavaScript Language. I will provide a sample program to show the actual coding of this tutorial. So Let's do the coding.

What is jQuery?

jQuery is a fast, small, and feature of JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across to any browsers. This is a combination of versatility and extensibility, to make thing faster and convenient to use.

Before we get started:

First you have to download the jQuery plugin.

Here is the link for the jQuery that i used in this tutorial https://jquery.com/.

Lastly, this is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will display a list of element that will try to remove later. To create this simply copy and write it into your text editor, then save it as index.html.

<html lang="eng">
	<head>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://www.sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="container-fluid">	
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6 well">
				<h3 class="text-primary">How to Remove an Element with jQuery</h3>
				<hr style="border-top: 1px SOLID #8c8b8b;"/>
					<ul>
						<li id="1">Example 1 <button class="remove">Remove</button></li>
						<li id="2">Example 2 <button class="remove">Remove</button></li>
						<li id="3">Example 3 <button class="remove">Remove</button></li>
						<li id="4">Example 4 <button class="remove">Remove</button></li>
						<li id="5">Example 5 <button class="remove">Remove</button></li>
					</ul>
			</div>
		</div>
	</div>	
</body>
</html>

Creating jQuery

This is where the main function of the application is. This code will dynamically remove the list element. To do this just copy and write these block of codes after the body tag.

<script src = "js/jquery-3.2.1.min.js"></script>
<script>
	$(document).ready(function(){
		$(".remove").click(function(){
			$(this).closest('li').fadeOut();
		});
	});
</script>

In this code we bind the button class element into the click function in order to trigger some event. After we bind the button we targeted the closest parent element of the button. Then we use fadeOut() function to remove the entire HTML list element along with the button.

Output

The How to Remove an Element with jQuery source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Remove an Element with jQuery. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

201 views