Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to clear content in jquery in Jquery functions of JQuery Examples
1654 Views
Note 
empty() function used clear the content of an element.
hide() - this function just hide the element,but you can see this element in html source of that page.

Example: 1 How to clear element, when click some element.

Related Topic:

remove() - this function remove the element,you can't see this element in html source of that page.
Example: 2 How to remove element, when click some element.

Example: 1 How to clear element, when click some element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").empty();
            });
        });
    </script>

</head>

<body>
    <div class="one">one-Click here to clear content shown below</div>
    <div class="two">content going to clear</div>
</body>

</html>
Example: 1 Demo 
Example: 1 Html page source
<!-- After click the class one div the content from the class two removed-->
<body style="">
  <div class="one">one-Click here to clear content shown below</div>
  <div class="two"></div>
</body>
Example: 2 How to remove element, when click some element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").hide();
            });
            $(".three").click(function () {
                $(".four").remove();
            });
        });
    </script>

</head>

<body>
    <div class="one">one-Click here to hide next number</div>
    <div class="two">two</div>
    <div class="three">three-Click here to remove next number</div>
    <div class="four">four</div>
</body>

</html>
Example: 2 Demo 
Example: 2 Html page source
<!-- class two just hidden in the page, but class four removed from page -->
<body style="">
   <div class="one">one-Click here to hide next number</div>
   <div class="two" style="display: none;">two</div>
   <div class="three">three-Click here to remove next number</div>
</body>
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details