javascript - 移除/恢复元素，维护它们的事件和元素的子元素

Question

我遇到了这样一种情况，我需要以某种方式编辑以下内容，在某些事件中(假设在这种情况下为“点击”事件)我需要删除(或解包？).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

演示: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> 的东西来包装它第二次再把它包起来!