Remove last-child from jquery

Question

I have situation where i have to delete all element(.bxwrapper) except last bxwrapper which is containing ul li from the html for this i have written jquery code which is not working properly please suggest.?

<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

You should first clone it then remove them.

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

Then append the cloned element to body or some other element.

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

Answer 2

You can use detach() so try this:

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

Or Simply

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

Answer 3

You also try with this:

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

but use into below jquery portion

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