Post
Ask Question

Remove a DOM Element Using jQuery

Introduction

This article shows how to remove a DOM element using jQuery. I hope you will like it.

Please see this article in my blog here.

Background

I know we are all working on the client-side technologies, especially in jQuery. Sometimes we may need to write more client-side code rather than server-side code. In that case, you may need to remove some DOM elements pragmatically. Here I will provide you a demo of how to satisfy this requirement.

Using the code

To start with, as you all know we need to load the jQuery reference.

  1. <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  

Once you load the reference you are ready to go.

Since this is a demo, we will explain with a procedure. Sounds good? So we will do the following.

  • Add the elements to the DOM
  • Delete the DOM elements using the .remove(), .get() functions

Add the elements to the DOM

We need to set our UI first, right?

  1. <body id="body">  
  2.       Remove a DOM element from the UI using JQuery- Sibeesh Passion  
  3.          <br/>  
  4.       <br/>  
  5.    <p id="addMe">Generate 10 Elements</p>  
  6. </body>  

Add CSS

  1. <style>  
  2.    p {  
  3.       color: red;  
  4.       width: 170px;  
  5.       cursor: pointer;  
  6.       border: 1px solid #ccc;  
  7.       text-align: center;  
  8.    }  
  9.    #deleteMe {  
  10.       color: white;  
  11.       width: 170px;  
  12.       cursor: pointer;  
  13.       border: 1px solid #ccc;  
  14.       text-align: center;  
  15.       background-color: blue;  
  16.    }  
  17. </style>  

So we have set our UI and now if you run your page you can see the output as follows.


Now we will add the necessary scripts.

  1. < script > $(document).ready(function() {  
  2.     $("#addMe").click(function() {  
  3.         var html = '<table>';  
  4.         for (var i = 1; i <= 10; i++) {  
  5.             html += "<tr><p>My Elements</p></tr>";  
  6.         }  
  7.         html += '</table>';  
  8.         $('#body').append(html).append('<div id="deleteMe">Delete 5 Elements</div>');  
  9.         $("#addMe").hide();  
  10.     });  
  11.     $(document).on('click', '#deleteMe', function() {  
  12.         for (var i = 1; i <= 5; i++) {  
  13.             $('#body').find('p').get(i).remove();  
  14.         }  
  15.         $("#addMe").hide();  
  16.         $("#deleteMe").hide();  
  17.     });  
  18. }); < /script>  

As you can see, we are adding elements to the DOM with a loop. Once you run the page you can see the output as follows.


And once you click on the “Delete 5 Elements” button, 5 DOM elements will be deleted.


The following code block describes how to use the .remove() function.

  1. $('#body').find('p').get(i).remove();  
  1. <html>  
  2.     <head>  
  3.         <title>emove a DOM element from the UI usign JQuery- Sibeesh Passion</title>  
  4.         <style>    
  5. p {    
  6. color: red;    
  7. width: 170px;    
  8. cursor: pointer;    
  9. border: 1px solid #ccc;    
  10. text-align: center;    
  11. }    
  12. #deleteMe {    
  13. color: white;    
  14. width: 170px;    
  15. cursor: pointer;    
  16. border: 1px solid #ccc;    
  17. text-align: center;    
  18. background-color: blue;    
  19. }    
  20. </style>  
  21.         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  
  22.     </head>  
  23.     <body id="body">    
  24. Remove a DOM element from the UI using JQuery- Sibeesh Passion    
  25.   
  26.         <br/>  
  27.         <br/>  
  28.         <p id="addMe">Generate 10 Elements</p>  
  29.         <script>    
  30. $(document).ready(function() {    
  31. $("#addMe").click(function() {    
  32. var html = '  
  33.             <table>';    
  34. for (var i = 1; i <= 10; i++) {    
  35. html += "  
  36.                 <tr>  
  37.                     <p>My Elements</p>  
  38.                 </tr>";    
  39. }    
  40. html += '  
  41.             </table>';    
  42. $('#body').append(html).append('  
  43.             <div id="deleteMe">Delete 5 Elements</div>');    
  44. $("#addMe").hide();    
  45. });    
  46. $(document).on('click', '#deleteMe', function() {    
  47. for (var i = 1; i <= 5; i++) {    
  48. $('#body').find('p').get(i).remove();    
  49. }    
  50. $("#addMe").hide();    
  51. $("#deleteMe").hide();    
  52. });    
  53. });    
  54.   
  55.         </script>  
  56.     </body>  
  57. </html>    

Conclusion

I hope you will like this article. Please share with me your valuable thoughts and comments. Your feedback is always welcomed.
Thanks in advance. Happy coding!


Similar Articles