JQuery Hide HTML Element

JQuery Hide HTML Element

Here we will see how to hide html element like anchor tag or link tag or hyperlink, div element, p tag, any input element like button or input text box.

On click hide hyperlink.

$("a").click(function(){
       
       $(this).hide();                
       
       });

On click hide paragraph html element.

$("p").click(function(){
        
        $(this).hide();                
        
        });

On click hide Div tag.

$("div").click(function(){
       
       $(this).hide();                
       
       });

On click hide input texbox, buttons elements.

$("input").click(function(){

$(this).hide();                

});

All above needs to be called once document is ready.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

   <script type="text/javascript" language="javascript">
   
   $(document).ready( function (){ 
   
       $("a").click(function(){
       
       $(this).hide();                
       
       });
       
       $("p").click(function(){
       
       $(this).hide();                
       
       });
       
       $("div").click(function(){
       
       $(this).hide();                
       
       });
       
       $("input").click(function(){
       
       $(this).hide();                
       
       });
       
    });
   
   </script>
HTML source.
<div>
            <a target="_blank" href="http://www.satalaj.com">www satalaj com</a>
            <a target="_blank" href="http://www.revenmerchantsrevices.com">www reven merchant services com</a>
        </div>
        <p>This is paragraph element 1.</p>
        <p>This is paragraph element 2.</p>
        <p>This is paragraph element 3.</p>
        <div>
        I'm in Div 1.
        </div>
        <div>
        I'm in Div 2.
        </div>
        <div>
        I'm in Div 3.
        </div>
        <input id="Text1" type="text" value="Enter your text here." />
        <br/>
        <input id="Button1" type="button" value="input button." />

Isn’t it very simple to use Jquery? Yes. It’s very very simple. In real scenarios, you may want to hide specific elements like buttons after click or links after click. To do that, you need to access elements by ID $(“#IDofElement”). You may want to access group of elemets using css class name like $(“.ClassName”).

Tags:

Learning JqueryBasics of jqueryhtml without using tables tableless html table less html css tableless layoutsJQuery Get .next() ElementHow To Hide Div On Click Using JQueryJQuery Find Parent ElementJQuery Add ElementJQuery Get Element By ID or class name or tag nameC# HtmlTextWriter ExampleJquery hide show div exampleBasic HTML5 Tags

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.