jQuery makes it easy for the developer to completely remove DOM elements, which is often useful when creating rich user interfaces. Having the ability to remove elements is useful in situations where your interface represents some information from a database, and it provides a way for the user to delete database items. If this UI is using AJAX to send the delete request to the web server, you will need to reflect the delete action on the client side and remove the element representing the database item.
Create a blank HTML document, and save it as recipe-11.html to an easily accessible location on your computer.
Understand how to remove DOM elements using jQuery by performing each of the following steps:
Add the following HTML code to the
recipe-11.htmlpage you have just created:<!DOCTYPE html> <html> <head> <title>Removing DOM elements</title> <script src="jquery.min.js"></script> <script> </script> </head> <body> <ul id="list"> <li>Item 1 <button class="remove-btn">X</button></li> <li>Item 2 <button class="remove-btn">X</button></li> <li>Item 3 <button class="remove-btn">X</button></li> <li>Item 4 <button class="remove-btn">X</button></li> </ul> </body> </html>Within the
<script></script>tags of the previous HTML document, add the following JavaScript code:$(function(){ //Listen for a click on any of the remove buttons $('.remove-btn').click(function(){ //When a remove button has been clicked //Select this buttons parent (the li element) and remove it $(this).parent().remove(); }); });Open the HTML document in a browser and click on the remove button to remove the selected list item.
jQuery provides us with a remove() function, which will remove the selected element from the DOM. In a situation as the one mentioned previously, you would have a list of items that represent the records within the database. Each of these list items would provide a remove button, allowing the user to delete the selected item.
In a real-world situation, this delete button would make an AJAX request to a web server, wait for the response, and then remove the selected element on the client side. To keep this recipe simple, we will just be looking at the JavaScript code to remove the element on the client side and will not be working with AJAX.
Note
Chapter 3, Loading and Manipulating Dynamic Content with AJAX and JSON, contains a wealth of AJAX recipes.
We can use jQuery's
click() function to listen for a click event on one of the delete buttons. Then, we can use $(this).parent() to select the <li> element we wish to delete, because the delete button is a sibling of this list element. We can then use the remove() method with no arguments to remove the selected list element.