JavaScript and hiding a div not working

Question

I can't get my "target" div to be hidden. When I change the div to hide to "div1" it works, but that is not what I want. Can anyone see why I can't hide "target" div?

<html>
<head>
  <title>My sample</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script type="text/javascript" language="javascript">


     $(document).ready(function() {
        $("#hide").click(function(event){
          var ele = document.getElementById("target");
          ele.style.display = "none";                     
        });
     });                                

    //myItems.length
     $(document).ready(function() {
        $("#driver").click(function(event){
           $.getJSON('http://www.example.com/JSONV5.php', function(jd) {
           var myItems = jd["items"];
              for (i = 0; i < 1; i++) {
                $('#div1').append('<div id="target">');
                $('#div1').append('<p> Title: ' + jd["items"][i]["title"]    + '</p>');
                $('#div1').append('<p> Description: ' + jd["items"][i]["description"]   + '</p>');
                $('#div1').append('<p><img alt="" src=/uploads/' + jd["items"][i]["image1"] + '></p>');
                $('#div1').append('</div>');                       
              };
           });
        });
     });
  </script>

   </head>  
   <body>
     <p>Click on the button to load result.html file:</p>
     <div id="div1" style="background-color:#cc0;">
       DIV 1
     </div>

     <input type="button" id="driver" value="Load Data" />
     <input type="button" id="hide" value="Hide Data" />
   </body>
</html>

Firstly, you're adding elements with the ID target in a loop, and ID's are unique. Secondly, you can't split elements across append() calls, you have to insert "whole" elements, right now you are hiding the first element with the ID target, but that element has no children. — adeneo
– adeneo, Commented Apr 17, 2015 at 17:31
Right click, inspect element in the DOM, and you would get the answer! — Shaunak D
– Shaunak D, Commented Apr 17, 2015 at 17:31

epascarello · Accepted Answer · 2015-04-17 17:29:46Z

3

You can not use append like it is a string. It is not building the html like you think it is. It is adding multiple elements that are siblings to each other. Second you can not have more than one item with the same id.

 $('#div1').append(
    '<div id="target">' +
    '<p> Title: ' + jd["items"][i]["title"]    + '</p>' +
    '<p> Description: ' + jd["items"][i]["description"]   + '</p>' +
    '<p><img alt="" src=/uploads/' + jd["items"][i]["image1"] + '></p>' +
    '</div>');

answered Apr 17, 2015 at 17:29

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eddie Over a year ago

Thanks a million! , back to the basics. I will be creating a new id dynamically. I just hard coded it to test. thanks again for all the input!

Ronald · Accepted Answer · 2015-04-17 17:37:44Z

0

You $.getJSON() call did not return any data and therefore you never created a div with id="target"

the $.getJSON() call is erroring out with: "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404."

answered Apr 17, 2015 at 17:37

Ronald

6191 gold badge5 silver badges12 bronze badges

Comments

Shiladitya · Accepted Answer · 2017-10-13 08:02:55Z

-1

Try

window.onload = function() {

instead of

$(document).ready(function() {

You can also try moving this

$("#hide").click(function(event){
  var ele = document.getElementById("target");
  ele.style.display = "none";                   
});

after $("#driver").click(function(event){.

edited Oct 13, 2017 at 8:02

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Apr 17, 2015 at 17:25

renakre

8,3318 gold badges55 silver badges114 bronze badges

Collectives™ on Stack Overflow

JavaScript and hiding a div not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related