Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to remove all child nodes from the selected elements?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 292
    Comment on it

    If you want to remove all the child nodes which contain selected HTML elements then it's not a difficult task now, we can do this easily with the help of jQuery empty() method.

    All the child nodes of our selected HTML element will be removed by jQuery empty() method when applied but it does not remove the selected element but it only removes all the child nodes of that element.

    syntax:-

        selector.empty( );

     

    selector − it is used to select HTML elements in which jquery has to be applied by using either id , class or HTML elements.

    Below is html code for jquery empty() method example.

        <div id="remove_div" style="height:150px;width:350px;border:2px solid #000;background-color:grey;">
        <p>Lorem ipsum Lorem ipsum Lorem ipsum .</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum .</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum .</p>
        </div>
        <button>Remove</button>

     

    Below is jquery remove method() code :-

        $(document).ready(function(){
            $("button").click(function(){
                $("#remove_div").empty();
            });
        });

    In above example $("#remove_div").empty();  this jQuery empty method is not removing the whole div but it is removing all its child elements with the help of  id i.e remove_div which we give to the div.

    working demo:-https://jsfiddle.net/9vhhoyws/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: