Is there a way to move an element outside of its parent with jquery?

Question

My structure is this html:

<div class="aside_listings">
     <div>
          <div>
               <!--a bunch of content-->
          </div>
     </div>
     <div class="toolbar search_options">
          <!--a bunch more content-->
     </div>
</div>

CSS

.aside_listings {
height: 483px;
width: 440px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 24px;
}

so the above code is working the way it's needed to, I need a scroll page because it's for a very long product list. At the bottom of the list is a search bar (pg 1, pg 2, pg3, etc.) Which I need to have outside of the '.aside_listings' div. This is all generated by code which I'm not able to touch. I looked up how to do this in css and I added these styles to the '.search_options'

position: absolute;
margin-top: -50px;
font-size: 18px;
color: #999999;
margin-left: 13px;
width: 418px;

Which on the surface looks like it's working, but if you navigate to one of the other pages or refine your search area it jumps around depending on the number of products appearing in the list.

Is there a way to move this outside of the parent element in jquery?

Thank you

Answer 1

If you want to move .toolbar right after .aside_listings in the DOM, you can do:

var $toolbar = $('.aside_listings > .toolbar');
$toolbar.parent().after($toolbar);

Answer 2

var $divElement = $(".aside_listings.search_options");
var html = $divElement.html();
$divElement.remove();
$(".aside_listings").after(html);