JQuery

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!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs