Hide
when the user clicks in the intern href

Question

I have done this document in JQuery, when the user clicks on the different internal links, this loads a with div id = "change" that "deletes" the content.

So far it deletes the image without problems, but the

inside no, I understand this only works for images and not for texts, but I do not find that script that can delete the text.

HTML

 <ul class="sub-menu">
              <li><a id="page2">Abertura de cajas</a></li>

All the content inside the div "cambio" should be erased at the moment the users clicks on the href (see above)

<div id="cambio">
<div id="text_main">

    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>

</div>   




<div><img id="logotipo" src=".\docu2_files\imagenes\ricoh.jpg"></div>

</div>

The Jquery loads the content of the required html and deletes the content in the id "cambio"

$(document).ready(function(){
       $("#page1").click(function(){
         $("#change").css("display", "none");
           $('#result').load('./docu2_files/docs/control_dia.html');
       });

You have framed your question as if we know what you are working on. Please provide more details about what you already have and what you want as output. — Jones Joseph, Apr 10 '17 at 08:27
Take a look at [this](http://stackoverflow.com/questions/1701973/clear-all-divs-contents-inside-a-div) — jrook, Apr 10 '17 at 08:34

Mihai T · Accepted Answer · 2017-04-10T09:13:34.887

2

you can use empty() to ' clear ' all the content ( including the #text-main div ) from inside the #cambio

Description: empty() Remove all child nodes of the set of matched elements from the DOM.

see snippet below or jsfiddle

$("#page2").click(function(){
    $("#cambio").empty()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
              <li><a id="page2">Abertura de cajas</a></li>
</ul>
<div id="cambio">
<div id="text_main">

    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>

</div> 
<div><img src="http://placehold.it/350x150"></div>

</div>

edited Apr 10 '17 at 09:13

answered Apr 10 '17 at 08:38

Mihai T

17,254
2
23
32

I added that in the Jquery file: $(document).ready(function(){ $("#page1").click(function(){ $("ul li").click(function(){ $("#cambio > #text_main ").empty() }) $('#result').load('./docu2_files/docs/control_dia.html'); }); But isn't working. – José Vieiros Apr 10 '17 at 08:49
well. i just made an example for you . `ul li` in my example is your `#page1 ` in yours . ( change in my code `ul li` with `#page2` plus you didn't share anything about the #result div ( where is it located in your HTML ? ) . – Mihai T Apr 10 '17 at 08:53
I mean it does disable the image but the text still there. – José Vieiros Apr 10 '17 at 09:06
it cannot be right. as you can see in my example , the text dissapears . and again...what image? in your example there is no image – Mihai T Apr 10 '17 at 09:08
There's an image: "
" – José Vieiros Apr 10 '17 at 09:10
Nothing, the image dissapears but the text stay. – José Vieiros Apr 10 '17 at 09:23
in my answer. can you see that the text is dissapearing ? so it must be from other code you have – Mihai T Apr 10 '17 at 09:28

score 0 · Answer 2 · answered Apr 10 '17 at 08:35

0

You can do this:

<div><img id="logotipo" src=".\docu2_files\imagenes\ricoh.jpg" onclick="hideFunction()"></div>

Then for your JavaScript / JQuery:

function hideFunction(){
    $("#text_main").hide();
}

answered Apr 10 '17 at 08:35

user3004449

129
1
15

Hide when the user clicks in the intern href

2 Answers2

Hide
when the user clicks in the intern href