.remove() – Sibeesh Passion https://sibeeshpassion.com My passion towards life Wed, 11 Jul 2018 16:27:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png .remove() – Sibeesh Passion https://sibeeshpassion.com 32 32 Remove a DOM element using JQuery https://sibeeshpassion.com/remove-a-dom-element-using-jquery/ https://sibeeshpassion.com/remove-a-dom-element-using-jquery/#disqus_thread Wed, 01 Jul 2015 10:22:00 +0000 http://sibeecst_passion.com/?p=5981 Introduction

Hi All, How are you today? 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 all are working in the client side technologies, especially in JQuery. Sometimes we may need to write more client side codes rather than server side codes. 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 do this requirement.

Using the code

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

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

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>
    [/html]

    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>
    [/css]

    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 needful scripts.

    [js]
    <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>
    [/js]

    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.

    [js]
    $(‘#body’).find(‘p’).get(i).remove();
    [/js]

    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>
    [/html]

    Conclusion

    I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

    Thanks in advance. Happy coding!

    Kindest Regards
    Sibeesh Venu

    ]]>     https://sibeeshpassion.com/remove-a-dom-element-using-jquery/feed/ 0