remove method in jQuery with examples

1. remove() method removes the set of matched elements from the DOM structure.
2. remove() is similar to empty() method, which removes element and everything inside it from the DOM structure.
3. Unlike detach() method remove() does not keep information of elements being removed.



Example 1 :

        <html>
        <head>
        <title>remove</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#removeId").click(function () {
                    $("#targetP").remove();
                    $("#targetDiv").remove();
                });
                $("#removeClass").click(function () {
                    $(".default").remove();
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP" class="default">This is p element.</p>
        <div id="targetDiv" class="default">This is div element.</div><br />
        <input type="button" id="removeId" value="Remove using Id selector"/>
        <input type="button" id="removeClass" value="Remove using Class selector"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
    
Demo :




In above example, we have rendered a paragraph and an div element. We have created two buttons, on click of both we are removing the elements from the DOM structure using remove() method. For removing we are using id and class selecotor both.



0 comments:

Post a Comment