JQuery hide () function is used to hide element from page. By using hide () method we can hide matched element from page. In this article I am trying to hide <div> element from page on button click.

Code:

<head>
 
    <script type="text/javascript" src="jquery.min.js"> </script>
 
    <script type="text/javascript">
        $(document).ready(function() 
        {
            $("div button").click(function
             {
                $(this).parents("div").hide("medium");// when button is clicked hide function will hide that particular <div> element from page
            });
        });
    </script>
 
</head>
<body>
    <h3>
        JQuery Hide part of text example 1</h3>
    <div> 
        jQuery is a library that makes it quicker and easier<br />
        to build JavaScript webpages and web apps.<br />
        <br />
        <button> <!--button is define in div tag-->
            Click to hide</button>
    </div>
    <h3>
        JQuery Hide part of text example 2</h3>
    <div>
        JQuery hide method is use
        <br />
        to hide part of text from page<br /><br />
        <button>
            Click to hide</button>
    </div>
</body>
</html>

hide()function in JQuery

When I will click on any particular button like I clicked on first button then text and button will hide but not heading  as it is not in div tag as shown below:

hide method in JQuery

hide method in JQuery

 

 

 

 

  Modified On Mar-22-2018 07:12:19 AM

Leave Comment