Question

<script type="text/javascript">
    function bookRetr(str) {
        if (str == "") {
            document.getElementById("more-info").innerHTML="";
            return;
        } 

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("more-info").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","showbook.php?id="+str,true);
        xmlhttp.send();
    }
</script>

<div class="bookProp" id="one" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;01&nbsp;</div>
</div>

<div class="bookProp" id="two" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;02&nbsp;</div>
</div>

<div class="bookProp" id="three" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;03&nbsp;</div>
</div>     

This script runs fine and does the work which I wanted, to load book info and load them to the id more-info. But I want to also hide/remove the div class booknoHolder when I click on the div class bookProp. I tried with a few jQuery codes but nothing is working. To mention that the div class bookProp is actually generated by a PHP while loop so the number of entries will be dynamic.

Answer 1

You say you are using jQuery but i don’t see any jQuery in your code. But if you want to hide some elements in jQuery, you can do this :

$('.booknoHolder').hide();

If you want to hide the booknoHolder elements when you click on a bookProp, just do this :

$(function() {
    $('body').on('click', '.bookProp', function() {
        $(this).find('.booknoHolder').hide();
    });
});

You can find more information here : http://api.jquery.com/on/