How to hide any child elements inside a parent div using jquery

Question

I have two cases, One when there is comments and one when there is not. I have separated two cases with php like this:

    <div class="box">
        <textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
        <button style="display: none;" id="comment_button" class="btn btn-success"  >Add Comment</button>
        <div id="comment_div">
        <b>Comments...</b></br>
        <?php if($comment_data){ foreach ($comment_data as $data) {?>
        <b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
        <p><?php echo $data->comment; ?></p>
        <?php } } else{?>
        <div id="no_comment_case" ><h1>No comments yet...</h1></div>
        <?php } ?>
    </div>

Now when there is no comment No comment case will be displayed. After user posts a comment with ajax i have tried the following code to hide the no comment case and only append the recent comment, but the no comment case is not being hidden. The jquery code is:

      success: function(msg){
                console.log(msg);
                if(msg=="success")
                {
                   $('#comment_button').hide();
                   $('#reviews_comment',$('#comment_div')).hide();
                   // $('div#comment_div> div:eq(2)').css("display", "none");
                   html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
                   $('#comment_div').append(html);

                }

              }

How can I do it. Any kind of suggestion are highly appreciated. Thanks.

Answer 1

Enclose comment_div properly,

<div class="box">
            <textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
            <button style="display: none;" id="comment_button" class="btn btn-success"  >Add Comment</button>
            <div id="comment_div">
            <b>Comments...</b></br>

            <?php if($comment_data){ foreach ($comment_data as $data) {?>
                <b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
                <p><?php echo $data->comment; ?></p>
            <?php } 
            } else{?>
                <div id="no_comment_case" ><h1>No comments yet...</h1></div>
            <?php } ?>

            </div>
        </div>

    Ajax call:

    success: function(msg){
                    if(msg=="success")
                    {
                       $('#comment_button').hide();
            $('#reviews_comment,#comment_div,#no_comment_case').hide();
                       html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
                       $('#comment_div').append(html);

                    }

                  }