Javascript 如何"；删除“；元素中包含所有子元素和；地点；它在另一个div中，同时保留所有jQuery功能？

第一：很难从页面发布JavaScript和HTML示例，因为我无法让它在JSFIDLE中工作

我有一个页面，使用jQuery我模拟有两个选项卡。它基本上是同一个容器，但“第二个”选项卡的内容是隐藏的。单击选项卡中的某个元素时，该元素应折叠打开。它将打开，但当您打开该元素时，右侧的下一个元素将沿着打开的元素向下移动。这会在右侧留下一个很大的间隙，因为那里有一个隐藏的元素。如何获取隐藏元素并从DOM中“删除”它们，然后单击第二个选项卡“粘贴”它们

我用remove（）、detach（）和hide（）试过了，但都不起作用。 使用detach（）可以从DOM中删除隐藏的元素，但不会将它们粘贴到其他选项卡中

下面是我的代码示例：

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

下面是HTML正文代码：

<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 &amp; 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>

巴西蜡+哈森比吉阿育吠陀
阿育吠陀美容院；维达拉克什米温泉酒店
乌得勒支
Maanden Restrend:2

凭单：1张
意大利3-gangendiner（25基兹）
布鲁诺餐厅
乌得勒支
Maanden Restrend:2

凭单：1张
安巴切特利克糖果巧克力
可可
乌得勒支
Maanden Restrend:2

凭单：1张
纽约披萨+芬达百利可乐
纽约乌得勒支披萨
乌得勒支
Maanden Restrend:2

凭单：1张
希尔德工场库利奈尔工场
赫特格拉赫特纳泰利埃酒店
乌得勒支
达根餐厅：60

凭单：1张
Bij桑拿Soesterberg een gehele dag桑拿
苏斯特伯格桑拿酒店
苏斯特伯格
达根餐厅：54

代金券：4张

问题是handedIn元素是隐藏的。破坏了布局。我知道如何从

DOM

中删除它们，但不知道如何将它们粘贴到其他选项卡中

---

任何帮助都将不胜感激。

嗯，您有很多代码。我能做的是，我可以复制一些快速而肮脏的东西来匹配你的问题标题。查看代码片段。下面的代码段有两个div。一个是空的，另一个有一些附加了事件处理程序的元素。我知道您需要在不更改事件处理程序的情况下移动它们

$（函数（）{
$（“#一个a”）。单击（函数（）{
警报（“Hi”）；
返回false；
});
a=$（“#一”）.clone（真，真）；
a、 附于（“#二”）；
$（“#一”）.html（“”）；
});
#一个{颜色：蓝色；}
#两个a{color:red；}

为什么不让它们
显示：无
而不是
可见性：隐藏
？@Pointy这可能会解决问题，我会尝试一下。谢谢你的邀请reply@Pointy它不起作用，问题是它们在DOMWell中，一个元素可以在DOM中，但是如果它的CSS
display
属性设置为
none
，那么它将不会影响DOM其余部分的呈现。这就是
display:none
@Pointy显示的全部要点