Блог

Я создал пользовательский прокручиваемый 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 with class scrollContent .

В настоящее время я пытаюсь добиться этого с помощью приведенного ниже кода:

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

Но это, вероятно, удаляет весь .scrollContent div, и из-за этого я вижу только большой белый экран в окне чата, в котором ничего нет.

Как правильно удалить последний элемент div?

Вы удаляли последний элемент, класс которого был scrollContent . Скорее вы хотите найти последний элемент внутри scrollContent элемента и удалить его.

Эта строка кода выполняет свою работу очень хорошо:

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