Question

我创建了一个自定义可滚动div，如下所示：

    <!-- Chat box content area Start -->
    <div class="row" id="ChatboxContentBlock">
                <div class="scrollContent">

                    <!-- chat messages start -->

                    <div class="row replyMessageRow">
                        <div class="col-sm-2 replyThumbnail">
                            <img src="/images/botimg.png">
                        </div>
                        <div class="col-sm-8 replyContentBlock">
                            <div class="replyContent">
                                <p>How are you?</p>
                            </div>
                        </div>
                        <div class="col-sm-2 replyLastCol">

                        </div>
                    </div>



                    <div class="row sendMessageRow">
                        <div class="col-sm-2 sendingLastCol">

                        </div>
                        <div class="col-sm-8 sendingContentBlock">
                            <div class="sendingContent">
                                <p>new content ok. Yeah, I agree.</p>
                            </div> 
                        </div>
                        <div class="col-sm-2 sendingThumbnail">
                            <img src="/images/sam.png">
                        </div>
                    </div>

                    <div class="row replyMessageRow">
                            <div class="col-sm-2 replyThumbnail">
                                <img src="/images/botimg.png">
                            </div>
                            <div class="col-sm-8 replyContentBlock">
                                <div class="replyContent">
                                    <p>How are you? Yeah, just answering my own question. How is the world now a days? is it yet a better place? I hope so. Yeah, this is just a dummy paragraph.</p>

                                </div>
                            </div>
                            <div class="col-sm-2 replyLastCol">

                            </div>
                    </div>

                    <div class="row sendMessageRow">
                        <div class="col-sm-2 sendingLastCol">

                        </div>
                        <div class="col-sm-8 sendingContentBlock">
                            <div class="sendingContent">
                                <p>new content ok. Yeah, I agree.</p>
                            </div> 
                        </div>
                        <div class="col-sm-2 sendingThumbnail">
                            <img src="/images/sam.png">
                        </div>
                    </div>

                    <div class="row replyMessageRow">
                            <div class="col-sm-2 replyThumbnail">
                                <img src="/images/botimg.png">
                            </div>
                            <div class="col-sm-8 replyContentBlock">
                                <div class="replyContent">
                                    <p>How are you?</p>

                                </div>
                            </div>
                            <div class="col-sm-2 replyLastCol">

                            </div>
                    </div>



                    <!-- chat messages end -->

                </div>



    </div>
    <!-- Chat box content area End -->

div类或replyMessageRow类的每个sendMessageRow都是可滚动的项目。

我想删除div类的scrollContent的最后一个元素。

当前，我正在尝试通过以下代码实现这一目标：

$('.scrollContent:last-child').remove();

但这可能会删除整个.scrollContent div，因此在聊天窗口中我只会看到一个大白屏，里面什么也没有。

删除div的最后一个元素的正确方法是什么？

谢谢。

Answer 1

您正在删除类为scrollContent的最后一个元素。而是要在scrollContent元素中找到最后一个元素并将其删除。

这行代码可以很好地完成这项工作：

$('.scrollContent').children(':last-child').remove();

如何在JQuery中删除可滚动div的最后一个div？

1 个答案: