Question

我遇到了这样一种情况：我需要编辑以下内容，在某些事件中（假设在这种情况下假定为“click”事件）我需要删除（或解包？）.container以及.header并且页面上仍然可以看到/ .itemlist。然后，我需要在其他一些事件上重新恢复.container和.header，同时仍然在a标记上维护事件侦听器，如果可能的话，不删除所述项目DOM。这可能吗？

<ul class="container">
  <li class="header"><a href="#">delete</a> | <a href="#">edit</a></li>
    <ul class="itemlist">
       <li>some item</li>
       <li>some other item</li>
    </ul>
</ul>

Answer 1

DEMO：http://jsbin.com/iwiju3

这只是一个概念证明，不确定是你想要的，但请告诉我！

$(function() {
    $("button").toggle(function() {
        $(".container").wrap('<span></span>'); //wrap all with span
        $(".itemlist").unwrap(); //unwrap container
        $(".header").hide(); //hide header
    },
    function() {
        $("span").wrap('<ul class="container"></ul>'); //rewrap with container
        $(".itemlist").unwrap(); //remove span
        $(".header").show(); //show header
    });
});

注意：如果您需要再次创建.header，则没有理由将其删除，只需隐藏！ .container可以解开，但由于.header和.itemlist是两个不同的元素，你需要用<span>之类的东西包裹它，以便再次包装它！

删除/恢复元素，维护其事件和元素的子元素

1 个答案: