CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2596635
user2596635

Reputation: 381

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

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

Upvotes: 6

Views: 11443

Answers (2)

Alex Art.
Alex Art.

Reputation: 8781

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

Upvotes: 2

plalx
plalx

Reputation: 43718

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);

Upvotes: 13

Related Questions