How to Hide div element on successful ajax response?

Question

i'm trying to hide a div element on an ajax response. here is what i've tried:

<div id="product-options-wrapper" class="product-options"><!--where i am calling ajax-->

new Ajax.Request(url, 
     {
        parameters: {opt_product_id: 22},
        onSuccess: function(response) {
           // Handle the response content...
           if (response.responseText === "1") {
             $("showoutofstocknotifbox").show();
               alert('it works'); //ajax response successful alert box shows
             $$('.product-options-bottom').hide(); //should hide a div element
           } else {
             $("showoutofstocknotifbox").hide();
           }
        },
     });
</div>
<div class="product-options-bottom"><!--trying to hide on ajax success--></div>

but this do nothing. i am using prototype javascript. how can i achieve this by correcting or modifying the above (javascript) code?

thanks for your time.

Answer 1

   new Ajax.Request(url, 
 {
    parameters: {opt_product_id: 22},
    onSuccess: function(response) {
       // Handle the response content...
       if (response.responseText === "1") {
         $("showoutofstocknotifbox").show();
           alert('it works'); //ajax response successful alert box shows

          $$('.product-options-bottom')[0].hide(); //should hide a div element

        } else {
         $("showoutofstocknotifbox").hide();
       }
    },
 });

$$('.class') is used to return array, so need to mention index with ...

Answer 2

Define if its class add . or if its id add #

For Class

 $(".showoutofstocknotifbox").show();

For ID

 $("#showoutofstocknotifbox").show();

Too much error in code also set your code using firebug check the errors like

alert() not aler()