- jQuery 2.0 Development Cookbook
- Leon Revill
- 425字
- 2021-07-16 12:25:31
Removing DOM elements
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.
Getting ready
Create a blank HTML document, and save it as recipe-11.html to an easily accessible location on your computer.
How to do it…
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.
How it works…
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.
See also
- Creating DOM elements
- Re-using DOM elements
- Modular Programming with Python
- Java入門經典（第6版）
- Python機器學習：數據分析與評分卡建模（微課版）
- Windows系統管理與服務配置
- Rust Cookbook
- C++程序設計基礎教程
- Python機器學習經典實例
- 重學Java設計模式
- 可解釋機器學習：模型、方法與實踐
- Visual Basic程序設計上機實驗教程
- 響應式架構：消息模式Actor實現與Scala、Akka應用集成
- 零基礎學Kotlin之Android項目開發實戰
- UML2面向對象分析與設計（第2版）
- Learning Jakarta Struts 1.2: a concise and practical tutorial
- Hack與HHVM權威指南