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

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
  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. });
  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!