javascript - 如何使用jquery隐藏父div中的任何子元素

Question

我有两种情况，一种是有评论，一种是没有评论。我用 php 分隔了两个案例，如下所示:

    <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>

现在当没有评论时，将显示没有评论的情况。用户使用ajax发布评论后，我尝试使用以下代码来隐藏无评论情况并仅附加最近的评论，但无评论情况并未被隐藏。 jquery代码是:

      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);

                }

              }

我该怎么办呢。任何形式的建议都将受到高度赞赏。谢谢。

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);

                    }

                  }