How to "remove" element with all children inside and "place" it in another div while keeping all jQuery functionality?
Question
First: It is difficult to post a example of the JavaScript and the HTML from the page because I could not get it to work in JSfiddle.
I have a page and with jQuery I simulate that there are two tabs. It is basically the same container but the content that is for the "second" tab is hidden. When you click on a element in the tabs it should fold open. It opens, but when you open the element the next element to the right goes down the open element. This leaves a big gap on the right because there is a hidden element there. How can I get the hidden elements and "remove" them from the DOM and then when I click on the second tab "paste" them there?
I have tried it with remove(), detach() and hide() but it does not work. With detach() it removes the hidden elements form the DOM, but does not paste them in the other tab.
Here is a example of my code:
function fixMyVouchers() {
var myVouchers = $("#my-vouchers");
var handedIn = $("#handed-in");
var handedInDeal = $(".handedIn");
var myVouchersContainer = $(".my-vouchers-container");
if(myVouchers.hasClass("active")) {
handedInDeal.each(function() {
$(this).detach();
console.log("Removed " + handedInDeal.length + " handed in deals");
});
}
handedIn.on("click", function() {
myVouchersContainer.html(handedInDeal);
console.log("click");
});
}
And here is the HTML Body Code:
<div class="row my-vouchers-container" id="myVouchers">
<div class="mix col-xs-4 notExpired" data-my-enddate="88" data-my-purchase="0" data-hash="1-of-3-behandelingen-brazillian-wax-en-harsen-van-onderbenen-en-oksels-bij-ayurveda-beauty-spa-veda-lakshmi-utrecht" data-href="http://local.socialdeal.nl/voucher/info/64l50c6dg4heiy7yn4/" style="display: inline-block;">
<div class="social-deal social-deal-etc">
<div class="social-deal-image">
<div class="social-deal-image-wrap">
<div class="social-deal-voucher-info"></div>
<img src="https://media.socialdeal.nl/deal/ayurveda-beauty-en-spa-veda-lakshmi-15062513000919.jpg" alt="Brazilian wax + harsen bij Ayurveda" title="Brazilian wax + harsen bij Ayurveda" class="sd-image-full" />
</div>
<div class="social-deal-diamond"> <i class="icon icon-category-beauty cat-beauty-color"></i>
</div>
</div>
<div class="social-deal-bottom">
<div class="social-deal-info">
<h4 class="social-deal-title">Brazilian wax + harsen bij Ayurveda</h4>
<div class="social-deal-company">
<div class="social-deal-company-name">Ayurveda Beauty & Spa | Veda Lakshmi</div>
<div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
Utrecht</div>
</div>
</div>
<div class="voucher-statistics"> <span class="voucher-info">
Maanden resterend: 2 <br/>
Vouchers: 1 </span>
</div>
</div>
</div>
</div>
<div class="mix col-xs-4 notExpired" data-my-enddate="87" data-my-purchase="0" data-hash="authentiek-italiaans-3-gangen-keuzediner-bij-ristorante-brunos-in-hartje-utrecht-met-bij-het-hoofdgerecht-keuze-uit-alle-pastas-van-de-kaart-utrecht" data-href="http://local.socialdeal.nl/voucher/info/mqywycdt5t5n56y/" style="display: inline-block;">
<div class="social-deal social-deal-etc">
<div class="social-deal-image">
<div class="social-deal-image-wrap">
<div class="social-deal-voucher-info">
<div class="social-deal-info-item">
<div class="social-deal-no-reservation" title="" data-toggle="tooltip" data-placement="left" data-original-title="Maak een reservering"></div>
</div>
</div>
<img src="https://media.socialdeal.nl/deal/ristorante-brunos-15062412531317.jpg" alt="Italiaans 3-gangendiner (25 keuzes)" title="Italiaans 3-gangendiner (25 keuzes)" class="sd-image-full" />
</div>
<div class="social-deal-diamond"> <i class="icon icon-category-food cat-food-color"></i>
</div>
</div>
<div class="social-deal-bottom">
<div class="social-deal-info">
<h4 class="social-deal-title"> Italiaans 3-gangendiner (25 keuzes)</h4>
<div class="social-deal-company">
<div class="social-deal-company-name">Ristorante Bruno´s</div>
<div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
Utrecht</div>
</div>
</div>
<div class="voucher-statistics"> <span class="voucher-info">
Maanden resterend: 2 <br/>
Vouchers: 1 </span>
</div>
</div>
</div>
</div>
<div class="mix col-xs-4 notExpired" data-my-enddate="79" data-my-purchase="0" data-hash="waardebon-twv-15-euro-te-besteden-op-het-gehele-assortiment-van-cacao-ambachtelijke-en-huisgemaakte-chocolade-en-bonbons-utrecht" data-href="http://local.socialdeal.nl/voucher/info/lg3j7cntmt969jw/" style="display: inline-block;">
<div class="social-deal social-deal-etc">
<div class="social-deal-image">
<div class="social-deal-image-wrap">
<div class="social-deal-voucher-info"></div>
<img src="https://media.socialdeal.nl/deal/cacao-15061611000264.jpg" alt="Ambachtelijke chocolade en bonbons" title="Ambachtelijke chocolade en bonbons" class="sd-image-full" />
</div>
<div class="social-deal-diamond"> <i class="icon icon-category-store cat-store-color"></i>
</div>
</div>
<div class="social-deal-bottom">
<div class="social-deal-info">
<h4 class="social-deal-title">Ambachtelijke chocolade en bonbons</h4>
<div class="social-deal-company">
<div class="social-deal-company-name">Cacao</div>
<div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
Utrecht</div>
</div>
</div>
<div class="voucher-statistics"> <span class="voucher-info">
Maanden resterend: 2 <br/>
Vouchers: 1 </span>
</div>
</div>
</div>
</div>
<div class="mix col-xs-4 notExpired" data-my-enddate="77" data-my-purchase="0" data-hash="om-af-te-halen-bij-new-york-pizza-een-pizza-25-cm-naar-keuze-een-blikje-cola-of-fanta-perfect-als-je-even-geen-zin-hebt-om-te-koken-utrecht" data-href="http://local.socialdeal.nl/voucher/info/y0on0ietkt161j5/" style="display: inline-block;">
<div class="social-deal social-deal-etc">
<div class="social-deal-image">
<div class="social-deal-image-wrap">
<div class="social-deal-voucher-info"></div>
<img src="https://media.socialdeal.nl/deal/new-york-pizza-utrecht-15061400070257.jpg" alt="New York Pizza + blikje cola of fanta" title="New York Pizza + blikje cola of fanta" class="sd-image-full" />
</div>
<div class="social-deal-diamond"> <i class="icon icon-category-food cat-food-color"></i>
</div>
</div>
<div class="social-deal-bottom">
<div class="social-deal-info">
<h4 class="social-deal-title">New York Pizza + blikje cola of fanta</h4>
<div class="social-deal-company">
<div class="social-deal-company-name">New York Pizza Utrecht</div>
<div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
Utrecht</div>
</div>
</div>
<div class="voucher-statistics"> <span class="voucher-info">
Maanden resterend: 2 <br/>
Vouchers: 1 </span>
</div>
</div>
</div>
</div>
<div class="mix col-xs-4 notExpired" data-my-enddate="60" data-my-purchase="0" data-hash="culinaire-workshop-lunchgerechten-maken-2-5-uur-of-een-workshop-summertapas-3-5-uur-of-een-van-gogh-schilderworkshop-6-5-uur-bij-grachtenatelier-utrecht" data-href="http://local.socialdeal.nl/voucher/info/x64exi3wv1c4iqwq6g/" style="display: inline-block;">
<div class="social-deal social-deal-etc">
<div class="social-deal-image">
<div class="social-deal-image-wrap">
<div class="social-deal-voucher-info"></div>
<img src="https://media.socialdeal.nl/deal/het-grachtenatelier-15062316390867.jpg" alt="Culinaire workshop of schilderworkshop" title="Culinaire workshop of schilderworkshop" class="sd-image-full" />
</div>
<div class="social-deal-diamond"> <i class="icon icon-category-course cat-course-color"></i>
</div>
</div>
<div class="social-deal-bottom">
<div class="social-deal-info">
<h4 class="social-deal-title">Culinaire workshop of schilderworkshop</h4>
<div class="social-deal-company">
<div class="social-deal-company-name">Het GrachtenAtelier</div>
<div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
Utrecht</div>
</div>
</div>
<div class="voucher-statistics"> <span class="voucher-info">
Dagen resterend: 60 <br/>
Vouchers: 1 </span>
</div>
</div>
</div>
</div>
<div class="mix col-xs-4 notExpired" data-my-enddate="54" data-my-purchase="0" data-hash="gehele-dag-entree-met-gebruik-van-alle-saunafaciliteiten-bij-sauna-soesterberg-geniet-van-pure-rust-en-ontspanning-juni-2015-amersfoort-utrecht" data-href="http://local.socialdeal.nl/voucher/info/o37dkidt1t494v7/" style="display: inline-block;">
<div class="social-deal social-deal-etc">
<div class="social-deal-image">
<div class="social-deal-image-wrap">
<div class="social-deal-voucher-info"></div>
<img src="https://media.socialdeal.nl/deal/sauna-soesterberg-15062612501019.jpg" alt="Bij Sauna Soesterberg een gehele dag sauna " title="Bij Sauna Soesterberg een gehele dag sauna " class="sd-image-full" />
</div>
<div class="social-deal-diamond"> <i class="icon icon-category-wellness cat-wellness-color"></i>
</div>
</div>
<div class="social-deal-bottom">
<div class="social-deal-info">
<h4 class="social-deal-title">Bij Sauna Soesterberg een gehele dag sauna </h4>
<div class="social-deal-company">
<div class="social-deal-company-name">Sauna Soesterberg</div>
<div class="social-deal-company-location dottedIfLong"> <i class="icon-pointer3"></i>
Soesterberg</div>
</div>
</div>
<div class="voucher-statistics"> <span class="voucher-info">
Dagen resterend: 54 <br/>
Vouchers: 4 </span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
The problem is that the handedIn elements are hidden. And are ruining the layout. I know how to remove them from the DOM but not how to paste them in the other tab.
Any help would be appreciated.
1 answers
solution1
0 ACCPTED 2015-06-29 14:02:23
Well, you have a lot of code. What I could do is, I can replicate something quick and dirty to match your question title. Check out the snippet. The following snippet has two divs. One is an empty one, and the other has some elements with event handler attached to it. I understand that you need to move them without changing the event handlers.
$(function () { $("#one a").click(function () { alert("Hi"); return false; }); a = $("#one").clone(true, true); a.appendTo("#two"); $("#one").html(""); });
#one a {color: blue;} #two a {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="one"> <a href="#" id="one-a">One A</a> </div> <div id="two"></div>
Test:
- The colour should turn red.
- Clicking on One should get an alert
Hi.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to remove all children from an element using jQuery?
How can i remove all characters started with # from inside a div element using jquery or javascript?
How to remove all children of contenteditable element?
How to append and remove all element under div using jquery
How to wrap all elements inside a div after a certain element? (JQuery)
How to disable all Element inside a div or table using jQuery
Removing a node while keeping all the children and the selection
Remove parent element and all children
Jquery Remove All Event Handlers Inside Element
How can I remove (.remove) all elements (div) but not this (this) element (div) in jquery?
Related Tags