Click here to Skip to main content
15,867,849 members
Articles / jQuery

Remove a DOM Element using JQuery

Rate me:
Please Sign up or sign in to vote.
4.33/5 (7 votes)
1 Jul 2015CPOL1 min read 9.3K   7   2
How to remove a DOM element using JQuery

Introduction

In this article, we will see how we can remove a DOM element using JQuery. I hope you will like it.

Background

I know we are all working in 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 am going to give you a demo of how we can meet this requirement.

Using the Code

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

JavaScript
<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 some steps. Sounds good? So we will do the following tasks.

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

Shall we start then?

Add the Elements to the DOM

We need to set our UI first, right?

HTML
<body id="body">
    Remove a DOM element from the UI using JQuery- Sibeesh Passion
    <br/>
    <br/>
    <p id="addMe">Generate 10 Elements</p>
</body>

Add CSS

CSS
<style>
        p {
            color: red;
            width: 170px;
            cursor: pointer;
            border: 1px solid #ccc;
            text-align: center;
        }
        #deleteMe {
            color: white;
            width: 170px;
            cursor: pointer;
            border: 1px solid #ccc;
            text-align: center;
            background-color: blue;
        }
    </style>

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

www.sibeeshpassion.com

Now we will add the needed scripts.

JavaScript
<script>
       $(document).ready(function() {
           $("#addMe").click(function() {
               var html = '<table>';
               for (var i = 1; i <= 10; i++) {
                   html += "<tr><p>My Elements</p></tr>";
               }
               html += '</table>';
               $('#body').append(html).append
               ('<div id="deleteMe">Delete 5 Elements</div>');
               $("#addMe").hide();
           });
           $(document).on('click', '#deleteMe', function() {
               for (var i = 1; i <= 5; i++) {
                   $('#body').find('p').get(i).remove();
               }
               $("#addMe").hide();
               $("#deleteMe").hide();
           });

       });
   </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:

www.sibeeshpassion.com

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

www.sibeeshpassion.com

The following code block describes how we can use .remove() function.

JavaScript
$('#body').find('p').get(i).remove();

Complete Code

HTML
<html>

<head>
    <title>emove a DOM element from the UI usign JQuery- Sibeesh Passion</title>
    <style>
        p {
            color: red;
            width: 170px;
            cursor: pointer;
            border: 1px solid #ccc;
            text-align: center;
        }
        #deleteMe {
            color: white;
            width: 170px;
            cursor: pointer;
            border: 1px solid #ccc;
            text-align: center;
            background-color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body id="body">
    Remove a DOM element from the UI using JQuery- Sibeesh Passion
    <br/>
    <br/>
    <p id="addMe">Generate 10 Elements</p>
    <script>
        $(document).ready(function() {
            $("#addMe").click(function() {
                var html = '<table>';
                for (var i = 1; i <= 10; i++) {
                    html += "<tr><p>My Elements</p></tr>";
                }
                html += '</table>';
                $('#body').append(html).append
                ('<div id="deleteMe">Delete 5 Elements</div>');
                $("#addMe").hide();
            });
            $(document).on('click', '#deleteMe', function() {
                for (var i = 1; i <= 5; i++) {
                    $('#body').find('p').get(i).remove();
                }
                $("#addMe").hide();
                $("#deleteMe").hide();
            });

        });
    </script>
</body>

</html>

Conclusion

I hope you liked this article. Please share your valuable thoughts and comments. Your feedback is always welcome.

Thanks in advance. Happy coding!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Germany Germany
I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu

Comments and Discussions

 
Question+3 for good article but not explaining a crucial point Pin
MarkRHolbrook2-Jul-15 9:35
MarkRHolbrook2-Jul-15 9:35 
AnswerRe: +3 for good article but not explaining a crucial point Pin
Sibeesh Passion2-Jul-15 18:50
professionalSibeesh Passion2-Jul-15 18:50 
Thanks a lot for your valuable suggestion. Normal click event won't fire if we dynamically create DOM element. Since I am creating "deleteMe" dynamically I am using that method.
==================!!!====================!!!========================
So much complexity in software comes from trying to make one thing do two things.
Kindest Regards
Sibeesh
http://sibeeshpassion.com/

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.