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.html page 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.

jQuery 2.0 Development Cookbook

By : Leon Revill

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Removing DOM elements

Getting ready

How to do it…

How it works…

Note

See also

jQuery 2.0 Development Cookbook

By : Leon Revill

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Removing DOM elements

Getting ready

How to do it…

How it works…

Note

See also

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access