從jQuery中刪除最后一個孩子

Question

我有這樣的情況，我必須刪除所有元素（.bxwrapper），但最后一個bxwrapper除外，后者包含來自html的ul li，為此我編寫了無法正常工作的jquery代碼，請提出建議。

<div class="row" id="customBx">
    <div class="bx-wrapper" style="max-width: 100%;">
        <div class="bx-viewport" style="width: 100%; overflow: hidden; position:   relative; height: 336px;">
            <div class="bx-wrapper" style="max-width: 100%;">
                <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 335px;">
                    <div class="bx-wrapper" style="max-width: 100%;">
                        <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 333px;">
                            <div class="bx-wrapper" style="max-width: 100%;">
                                <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 331px;">
                                    <ul class="bxslider">
                                        <li class="edSel edBxSlider editBxSlider edRemove" style="float: left; list-style: none; position: relative; width: 990px;"></li>
                                        <li class="edSel edBxSlider editBxSlider edRemove" style="float: left; list-style: none; position: relative; width: 990px;"></li>
                                    </ul>
                                </div>
                                <div class="bx-controls bx-has-controls-direction">
                                    <div class="bx-controls-direction">
<a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('.bx-wrapper:not(:last-child)').remove();
</script>

Answer 1

您應該首先clone它，然后將其刪除。

var list = $('ul.bxslider').clone(true, true);
$('.bx-wrapper').remove();

然后將克隆的元素附加到body或其他元素。

$('#customBx').html('<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 331px;"></div>').find('.bx-viewport').append( + list + );

Answer 2

您可以使用detach()因此請嘗試以下操作：

var $lastChild = $('.bx-wrapper').last().detach();
$('#customBx').html($lastChild);

或簡單地

$('#customBx').html($('.bx-wrapper').last());

Answer 3

您也可以嘗試以下方法：

 var $lastChildren = $('ul.bxslider').parent().parent('.bx-wrapper').html(); $('#customBx').html($lastChildren); 

但用於下面的jquery部分

 $(document).ready(function(){ // Above code })